diff --git a/resources/assets/sass/common.scss b/resources/assets/sass/common.scss index 33e99c3d..d95b803d 100644 --- a/resources/assets/sass/common.scss +++ b/resources/assets/sass/common.scss @@ -47,6 +47,10 @@ h6, font-weight: bold; } +h1 { + font-size: 3rem; +} + p { font-family: "Open Sans Variable", sans-serif; font-weight: normal; diff --git a/resources/assets/sass/common/button.scss b/resources/assets/sass/common/button.scss index adc2913c..7917e076 100644 --- a/resources/assets/sass/common/button.scss +++ b/resources/assets/sass/common/button.scss @@ -1,5 +1,12 @@ @import "../_variables.scss"; +.btn { + padding: 22px 30px; + transition: all 0.2s; + font-family: "Noto Sans Variable", sans-serif; + border-radius: 21px; +} + .btn-primary { background-color: $brand-primary; border: none; @@ -8,14 +15,10 @@ .call-to-action { box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); border: none; - border-radius: 21px; - padding: 27px 30px; - min-width: 283px; - font-family: "Noto Sans Variable", sans-serif; + padding: 25px 30px; font-size: 20px; font-weight: 600; - line-height: 27px; - transition: all 0.2s; + line-height: 25px; &:hover { box-shadow: diff --git a/resources/assets/sass/pages/home.scss b/resources/assets/sass/pages/home.scss index eb9206d0..ed80f022 100644 --- a/resources/assets/sass/pages/home.scss +++ b/resources/assets/sass/pages/home.scss @@ -39,6 +39,7 @@ $colorForTabs: $brand-primary; .motto-content { z-index: 10001; + padding: 0px; } #about { @@ -48,7 +49,12 @@ $colorForTabs: $brand-primary; } p { - font-size: 17px; + font-size: 16px; + } + + ul { + list-style-type: none; + padding: 0; } } @@ -59,27 +65,30 @@ $colorForTabs: $brand-primary; } li { - float: unset; - display: inline-block; - border: 1px solid $colorForTabs; - background-color: white; - margin-bottom: 5px; a { color: $colorForTabs; border: none !important; font-size: 16px; - border-radius: 0; - - &:hover, - &:focus { - color: $colorForTabs; - } + border-radius: 21px; + padding: 22px 34px; + transition: all 0.2s; + font-family: "Noto Sans Variable", sans-serif; + width: 250px; + text-align: center; &.active { border: 1px solid $colorForTabs; background-color: $colorForTabs; color: white !important; + + &:hover, + &:focus { + box-shadow: + 0 4px 4px rgba(0, 0, 0, 0.25), + 0 4px 4px rgba(0, 0, 0, 0.25); + background-color: lighten($button-background-color, 10%); + } } } } @@ -162,21 +171,33 @@ $colorForTabs: $brand-primary; } #projects { + + background-color: $grey; + + .content-container { + padding: 15px 0; + + p { + text-align: center; + } + } + .projects-container { margin-top: 50px; .project-wrapper { border: 1px solid #efefef; + border-radius: 12px; background-color: #fff; margin-bottom: 30px; + padding: 25px; .project-logo { text-align: center; padding: 15px; img { - height: 100px; - max-width: 100%; + width: 100px; } } @@ -189,7 +210,7 @@ $colorForTabs: $brand-primary; min-height: 100px; p { - font-size: 1rem; + font-size: 18px; } } @@ -206,11 +227,8 @@ $colorForTabs: $brand-primary; .project-visit-btn { margin-top: 3rem; - padding: 0 15px 15px; a { - width: 200px; - padding: 15px; margin: auto; } } diff --git a/resources/assets/sass/project/landing-page.scss b/resources/assets/sass/project/landing-page.scss index 240d8661..4fb86cd7 100644 --- a/resources/assets/sass/project/landing-page.scss +++ b/resources/assets/sass/project/landing-page.scss @@ -6,1365 +6,1369 @@ h3, h4, h5, h6 { - color: $landing-page-primary; + color: $landing-page-primary; } .row { - background-size: cover; - background-position: center; - - .overlay-filter { - z-index: 1000; - background-color: black; - opacity: 0.5; - height: 650px; - top: 0; - position: absolute; - width: 100%; - - @media (max-width: 576px) { - height: 950px; - } - } - - .overlay-filter.overlay-thanks { - height: 750px; - - @media (max-width: 576px) { - height: 1050px; - } - } + background-size: cover; + background-position: center; + + .overlay-filter { + z-index: 1000; + background-color: black; + opacity: 0.5; + height: 650px; + top: 0; + position: absolute; + width: 100%; + + @media (max-width: 576px) { + height: 950px; + } + } + + .overlay-filter.overlay-thanks { + height: 750px; + + @media (max-width: 576px) { + height: 1050px; + } + } } #project-motto-container { - .overlay-filter { - opacity: 0.3; - } + .overlay-filter { + opacity: 0.3; + } } body { - a { - color: $landing-page-primary; - } + a { + color: $landing-page-primary; + } } .featuresList { - width: 40%; - margin-right: auto; - margin-left: auto; - margin-top: 30px; + width: 40%; + margin-right: auto; + margin-left: auto; + margin-top: 30px; } .navbar-default { - background-color: #fff; - - .navbar-brand { - height: auto; - - img { - height: 70px; - } - } - - .navbar-toggle { - margin: 15px; - } - - .navbar-collapse { - &.collapse.in, - &.collapsing { - float: unset !important; - } - } + background-color: #fff; + + .navbar-brand { + height: auto; + + img { + height: 70px; + } + } + + .navbar-toggle { + margin: 15px; + } + + .navbar-collapse { + &.collapse.in, + &.collapsing { + float: unset !important; + } + } } .motto-content { - padding: 70px 5px; - - .frosted { - position: absolute; - overflow: hidden; - width: 100%; - height: 100%; - background-color: rgba(255, 255, 255, 0.60); - content: ""; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 1; - } - - h1, - h2 { - margin-bottom: 0; - font-weight: bold; - } - - #project-motto { - position: relative; - z-index: 2; - - .container-fluid .row{ - display: flex; - align-items: center; - justify-content: center; - } - - #motto-title { - font-weight: 600; - margin-bottom: 0.8rem; - font-size: 2.3rem; - } - - @media (max-width: 991px) { - max-width: 90%; - } - - color: white; - } - - #motto-subtitle { - font-size: 1.2rem; - } + padding: 70px 5px; + + .frosted { + position: absolute; + overflow: hidden; + width: 100%; + height: 100%; + background-color: rgba(255, 255, 255, 0.60); + content: ""; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 1; + } + + h1, + h2 { + margin-bottom: 0; + font-weight: bold; + } + + #project-motto { + position: relative; + z-index: 2; + + + .container { + display: flex; + flex-direction: column; + justify-content: center; + height: 100%; + + .row { + display: flex; + align-items: center; + height: 100%; + + .btn-container { + display: flex; + flex-direction: column; + justify-content: center; + height: 100%; + } + } + } + + #motto-title { + font-weight: 600; + margin-bottom: 0.8rem; + font-size: 2.3rem; + } + + @media (max-width: 991px) { + max-width: 90%; + } + + color: white; + } + + #motto-subtitle { + font-size: 1.2rem; + } } section { - h1, - h2 { - text-align: center; - } - - #about .content-container { - padding: 10vh 5%; - font-size: 20px; - - h1, - h2 { - text-align: left; - font-size: 32px; - line-height: 44px; - margin-bottom: 7px; - - &~h2 { - margin-top: 60px; - } - } - - p { - font-size: 16px; - line-height: 22px; - } - } + h1, + h2 { + text-align: center; + } + + #about .content-container { + padding: 10vh 5%; + font-size: 20px; + + h1, + h2 { + text-align: left; + font-size: 32px; + line-height: 44px; + margin-bottom: 7px; + + & ~ h2 { + margin-top: 60px; + } + } + + p { + font-size: 16px; + line-height: 22px; + } + } } ol { - li { - margin-bottom: 10px; - } + li { + margin-bottom: 10px; + } } #questionnaire-section, #collective-goal { - background-color: #e8e9eb; + background-color: #e8e9eb; } #questionnaire-section { - @include media-breakpoint-up(md) { - padding: 9vh 0; - } + @include media-breakpoint-up(md) { + padding: 9vh 0; + } } #questionnaire-wrapper { - background-color: #e8e9eb; + background-color: #e8e9eb; } #questionnaire { - background-size: cover; - width: 100%; - @include media-breakpoint-up(md) { - padding: 7vh 10vh; - padding-bottom: 0; - } - - .content-container { - font-size: 20px; - @include media-breakpoint-up(md) { - padding: 5vh 12vh; - display: flex; - flex-direction: column; - align-items: center; - } - } - - #machine-translation-indicator { - padding-top: 30px; - } - - .questionnaire-description { - margin: 0 auto 2rem; - text-align: justify; - } - - .questionnaire-section-title { - font-size: 2.2rem; - margin-bottom: 10px; - margin-left: auto; - margin-right: auto; - text-align: center; - font-weight: bold; - } - - .wrapper-box { - border: 1px solid #99aec1; - background-color: white; - - .wrapper-title { - background-color: #ced8e1; - color: black; - font-weight: 600; - border-bottom: 1px solid #99aec1; - text-align: center; - padding: 10px; - - p { - font-size: 16px; - margin: 0; - } - } - } + background-size: cover; + width: 100%; + @include media-breakpoint-up(md) { + padding: 7vh 10vh; + padding-bottom: 0; + } + + .content-container { + font-size: 20px; + @include media-breakpoint-up(md) { + padding: 5vh 12vh; + display: flex; + flex-direction: column; + align-items: center; + } + } + + #machine-translation-indicator { + padding-top: 30px; + } + + .questionnaire-description { + margin: 0 auto 2rem; + text-align: justify; + } + + .questionnaire-section-title { + font-size: 2.2rem; + margin-bottom: 10px; + margin-left: auto; + margin-right: auto; + text-align: center; + font-weight: bold; + } + + .wrapper-box { + border: 1px solid #99aec1; + background-color: white; + + .wrapper-title { + background-color: #ced8e1; + color: black; + font-weight: 600; + border-bottom: 1px solid #99aec1; + text-align: center; + padding: 10px; + + p { + font-size: 16px; + margin: 0; + } + } + } } .questionnaire-modal { - z-index: 100000; - - .modal-title { - font-weight: normal; - text-align: center; - font-size: 22px; - padding: 20px; - width: 100%; - } - - .language-selection { - label, - select { - font-size: 1.25em; - } - } - - .description h5 { - line-height: 1.6em; - } - - .sv-title { - font-family: inherit; - } - - .sv_row { - padding: 10px 25px 20px; - - h5 { - font-size: 18px; - font-weight: normal; - } - - input[type="text"], - textarea { - border: 1px solid #ccc; - width: 100%; - padding: 5px 10px; - height: unset; - - &:focus { - border-color: #999; - } - } - - label { - font-weight: normal; - } - - .sv_q_rating { - text-align: center; - - .sv_q_rating_item { - cursor: pointer; - - &.active { - .sv_q_rating_item_text { - background-color: $landing-page-primary; - border-radius: 50%; - padding: 5px; - display: inline-block; - } - } - - .sv_q_rating_item_text { - padding-top: 5px; - width: 30px; - height: 30px; - border: none !important; - line-height: 1.5em; - font-weight: bold; - margin: 0 10px; - } - } - - .sv_q_rating_min_text { - font-weight: normal; - font-size: smaller; - margin-right: 20px; - } - - .sv_q_rating_max_text { - font-weight: normal; - font-size: smaller; - margin-left: 20px; - } - } - } - - .sv_body { - border: none; - } - - .sv_nav { - text-align: center; - padding: 30px 0; - - .sv_complete_btn, - .sv_prev_btn, - .sv_next_btn { - padding: 10px 20px; - border: none; - background-color: $landing-page-primary; - color: white; - margin: 0 5px; - - &:focus, - &:hover { - opacity: 0.8; - } - } - - .sv_prev_btn, - .sv_next_btn { - background-color: #67b8f9; - } - } - - #lang-selector { - background-color: #c7e0ec; - margin-top: -15px; - padding: 15px; - color: rgb(74, 74, 74); - - label[for="questionnaire-lang-selector"] { - margin: 8px 0; - } - } + z-index: 100000; + + .modal-title { + font-weight: normal; + text-align: center; + font-size: 22px; + padding: 20px; + width: 100%; + } + + .language-selection { + label, + select { + font-size: 1.25em; + } + } + + .description h5 { + line-height: 1.6em; + } + + .sv-title { + font-family: inherit; + } + + .sv_row { + padding: 10px 25px 20px; + + h5 { + font-size: 18px; + font-weight: normal; + } + + input[type="text"], + textarea { + border: 1px solid #ccc; + width: 100%; + padding: 5px 10px; + height: unset; + + &:focus { + border-color: #999; + } + } + + label { + font-weight: normal; + } + + .sv_q_rating { + text-align: center; + + .sv_q_rating_item { + cursor: pointer; + + &.active { + .sv_q_rating_item_text { + background-color: $landing-page-primary; + border-radius: 50%; + padding: 5px; + display: inline-block; + } + } + + .sv_q_rating_item_text { + padding-top: 5px; + width: 30px; + height: 30px; + border: none !important; + line-height: 1.5em; + font-weight: bold; + margin: 0 10px; + } + } + + .sv_q_rating_min_text { + font-weight: normal; + font-size: smaller; + margin-right: 20px; + } + + .sv_q_rating_max_text { + font-weight: normal; + font-size: smaller; + margin-left: 20px; + } + } + } + + .sv_body { + border: none; + } + + .sv_nav { + text-align: center; + padding: 30px 0; + + .sv_complete_btn, + .sv_prev_btn, + .sv_next_btn { + padding: 10px 20px; + border: none; + background-color: $landing-page-primary; + color: white; + margin: 0 5px; + + &:focus, + &:hover { + opacity: 0.8; + } + } + + .sv_prev_btn, + .sv_next_btn { + background-color: #67b8f9; + } + } + + #lang-selector { + background-color: #c7e0ec; + margin-top: -15px; + padding: 15px; + color: rgb(74, 74, 74); + + label[for="questionnaire-lang-selector"] { + margin: 8px 0; + } + } } #questionnaire-responded { - z-index: 100000; - - .modal-dialog { - max-width: 680px; - margin-top: 150px; - } - - .modal-title { - font-weight: normal; - text-align: center; - font-size: 25px; - } - - .btn { - margin-top: 10px; - margin-bottom: 10px; - font-family: Avenir, Helvetica, sans-serif; - box-sizing: border-box; - border-radius: 3px; - box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16); - color: #fff; - display: inline-block; - text-decoration: none; - -webkit-text-size-adjust: none; - background-color: $button-background-color; - border-top: 10px solid $button-background-color; - border-right: 18px solid $button-background-color; - border-bottom: 10px solid $button-background-color; - border-left: 18px solid $button-background-color; - font-size: x-large; - } - - .respond-questionnaire.feedback { - text-decoration: underline; - color: $button-background-color; - } - - .anonymous-title { - margin-top: 10px; - margin-bottom: 10px; - font-weight: bold; - font-size: 24px; - } - - .prefer-staying-anonymous:before { - background-color: #f5faff; - background-image: url("../../images/anonymous.webp"); - background-repeat: no-repeat; - min-height: 150px; - content: ""; - display: block; - margin-bottom: 20px; - padding-left: 5px; - padding-right: 5px; - background-position: center; - } - - .go-to-homepage { - color: #5353f5; - font-size: 16px; - text-decoration: underline; - } - - .bck-color-feedback { - background-color: #ffeab5; - } - - .login-invitation { - text-align: center; - } - - .anonymous-answers-saved { - background-color: #f5faff; - background-image: url("../../images/sign_in.webp"); - background-repeat: no-repeat; - min-height: 310px; - background-size: 260px; - background-position: bottom; - margin-left: -14px; - margin-right: -14px; - margin-top: -14px; - border-radius: 7px; - text-align: center; - padding-top: 25px; - font-weight: bold; - } - - .dashboard-message { - font-family: Avenir, Helvetica, sans-serif; - box-sizing: border-box; - color: $button-background-color; - font-size: toRem(22); - line-height: 1.5em; - margin-top: 0; - text-align: center; - } - - p { - text-align: center; - font-size: 20px; - } - - .modal-body { - .badge-container { - padding-top: 30px; - padding-bottom: 30px; - margin-bottom: -15px; - margin-top: -15px; - - p { - font-weight: bold; - - .level { - font-weight: normal; - } - } - - img { - height: auto; - width: 250px; - margin: 10px auto; - display: block; - } - } - } - - .modal-footer { - .refresh-page { - max-width: 100px; - margin: auto; - } - } - - .gamification-badge { - padding-bottom: 20px; - - .badgeName { - font-size: 200%; - font-family: "Open Sans", sans-serif; - } - - .badgeLevel { - font-size: 140%; - font-family: "Open Sans", sans-serif; - margin-top: 15px; - margin-bottom: 15px; - } - - .badgeMessage { - font-size: 150%; - font-family: "Open Sans", sans-serif; - } - } + z-index: 100000; + + .modal-dialog { + max-width: 680px; + margin-top: 150px; + } + + .modal-title { + font-weight: normal; + text-align: center; + font-size: 25px; + } + + .btn { + margin-top: 10px; + margin-bottom: 10px; + font-family: Avenir, Helvetica, sans-serif; + box-sizing: border-box; + border-radius: 3px; + box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16); + color: #fff; + display: inline-block; + text-decoration: none; + -webkit-text-size-adjust: none; + background-color: $button-background-color; + border-top: 10px solid $button-background-color; + border-right: 18px solid $button-background-color; + border-bottom: 10px solid $button-background-color; + border-left: 18px solid $button-background-color; + font-size: x-large; + } + + .respond-questionnaire.feedback { + text-decoration: underline; + color: $button-background-color; + } + + .anonymous-title { + margin-top: 10px; + margin-bottom: 10px; + font-weight: bold; + font-size: 24px; + } + + .prefer-staying-anonymous:before { + background-color: #f5faff; + background-image: url("../../images/anonymous.webp"); + background-repeat: no-repeat; + min-height: 150px; + content: ""; + display: block; + margin-bottom: 20px; + padding-left: 5px; + padding-right: 5px; + background-position: center; + } + + .go-to-homepage { + color: #5353f5; + font-size: 16px; + text-decoration: underline; + } + + .bck-color-feedback { + background-color: #ffeab5; + } + + .login-invitation { + text-align: center; + } + + .anonymous-answers-saved { + background-color: #f5faff; + background-image: url("../../images/sign_in.webp"); + background-repeat: no-repeat; + min-height: 310px; + background-size: 260px; + background-position: bottom; + margin-left: -14px; + margin-right: -14px; + margin-top: -14px; + border-radius: 7px; + text-align: center; + padding-top: 25px; + font-weight: bold; + } + + .dashboard-message { + font-family: Avenir, Helvetica, sans-serif; + box-sizing: border-box; + color: $button-background-color; + font-size: toRem(22); + line-height: 1.5em; + margin-top: 0; + text-align: center; + } + + p { + text-align: center; + font-size: 20px; + } + + .modal-body { + .badge-container { + padding-top: 30px; + padding-bottom: 30px; + margin-bottom: -15px; + margin-top: -15px; + + p { + font-weight: bold; + + .level { + font-weight: normal; + } + } + + img { + height: auto; + width: 250px; + margin: 10px auto; + display: block; + } + } + } + + .modal-footer { + .refresh-page { + max-width: 100px; + margin: auto; + } + } + + .gamification-badge { + padding-bottom: 20px; + + .badgeName { + font-size: 200%; + font-family: "Open Sans", sans-serif; + } + + .badgeLevel { + font-size: 140%; + font-family: "Open Sans", sans-serif; + margin-top: 15px; + margin-bottom: 15px; + } + + .badgeMessage { + font-size: 150%; + font-family: "Open Sans", sans-serif; + } + } } #questionnaire-wrapper #questionnaire-wrapper { - background-color: #efefef; - @include media-breakpoint-up(md) { - padding: 7vh 0; - } + background-color: #efefef; + @include media-breakpoint-up(md) { + padding: 7vh 0; + } } .divider { - border-bottom: 1px solid gray; - width: 35%; - margin: auto; + border-bottom: 1px solid gray; + width: 35%; + margin: auto; } footer { - .row { - background-color: #99aec1; - } - - .row:first-child { - padding-top: 60px; - } - - .row:last-child { - padding-bottom: 20px; - } - - a { - font-weight: bold; - - &:hover, - &:focus { - color: $button-background-color; - } - } - - @media screen and (max-width: 767px) { - text-align: center; - } + .row { + background-color: #99aec1; + } + + .row:first-child { + padding-top: 60px; + } + + .row:last-child { + padding-bottom: 20px; + } + + a { + font-weight: bold; + + &:hover, + &:focus { + color: $button-background-color; + } + } + + @media screen and (max-width: 767px) { + text-align: center; + } } .goal-title { - color: $black; + color: $black; } .social-share { - .btn { - max-width: 150px; - margin-left: 4px; - margin-right: 4px; - } + .btn { + max-width: 150px; + margin-left: 4px; + margin-right: 4px; + } } #collective-goal { - .container { - max-width: 840px; - } - - padding-bottom: 50px; - - .info { - font-size: 30px; - padding: 33px; - } - - .progress { - max-width: 400px; - - background-color: fuchsia; - margin: auto; - - .progress-bar { - background-color: $landing-page-primary; - } - } - - .gamification-wrapper { - .gamification-content { - font-size: 18px; - padding: 15px; - - .number { - color: $landing-page-primary; - font-weight: bold; - width: 100px; - text-align: right; - display: inline-block; - } - } - } - - .activity-container { - margin-top: 50px; - - .activity-content { - height: 200px; - max-height: 200px; - overflow-y: auto; - - .activity-item { - padding: 5px 15px; - - .user-icon { - margin-right: 5px; - font-size: xx-large; - vertical-align: middle; - } - - &:nth-child(even) { - background-color: #eef1f4; - } - } - - .no-activity-found-msg { - font-style: italic; - text-align: center; - margin-top: 80px; - font-size: 18px; - } - } - } - - .activity-title { - margin-bottom: 10px; - } + .container { + max-width: 840px; + } + + padding-bottom: 50px; + + .info { + font-size: 30px; + padding: 33px; + } + + .progress { + max-width: 400px; + + background-color: fuchsia; + margin: auto; + + .progress-bar { + background-color: $landing-page-primary; + } + } + + .gamification-wrapper { + .gamification-content { + font-size: 18px; + padding: 15px; + + .number { + color: $landing-page-primary; + font-weight: bold; + width: 100px; + text-align: right; + display: inline-block; + } + } + } + + .activity-container { + margin-top: 50px; + + .activity-content { + height: 200px; + max-height: 200px; + overflow-y: auto; + + .activity-item { + padding: 5px 15px; + + .user-icon { + margin-right: 5px; + font-size: xx-large; + vertical-align: middle; + } + + &:nth-child(even) { + background-color: #eef1f4; + } + } + + .no-activity-found-msg { + font-style: italic; + text-align: center; + margin-top: 80px; + font-size: 18px; + } + } + } + + .activity-title { + margin-bottom: 10px; + } } #newsletter { - h2 { - font-size: 28px; - margin-top: 100px; - } - - .content-container { - padding-top: 50px; - - .sign-up { - margin-top: 50px; - - div { - margin-bottom: 10px; - } - } - - .newsletter-msg { - font-size: 14px; - font-weight: bold; - margin-top: 20px; - display: none; - - .subscription-success-msg { - color: $success; - display: none; - } - - .subscription-error-msg { - color: $danger; - display: none; - } - - &.success { - display: block; - - .subscription-success-msg { - display: block; - } - - .subscription-error-msg { - display: none; - } - } - - &.error { - display: block; - - .subscription-success-msg { - display: none; - } - - .subscription-error-msg { - display: block; - } - } - } - } + h2 { + font-size: 28px; + margin-top: 100px; + } + + .content-container { + padding-top: 50px; + + .sign-up { + margin-top: 50px; + + div { + margin-bottom: 10px; + } + } + + .newsletter-msg { + font-size: 14px; + font-weight: bold; + margin-top: 20px; + display: none; + + .subscription-success-msg { + color: $success; + display: none; + } + + .subscription-error-msg { + color: $danger; + display: none; + } + + &.success { + display: block; + + .subscription-success-msg { + display: block; + } + + .subscription-error-msg { + display: none; + } + } + + &.error { + display: block; + + .subscription-success-msg { + display: none; + } + + .subscription-error-msg { + display: block; + } + } + } + } } .loader-wrapper { - background: rgba(0, 0, 0, 0.2); - position: fixed; - top: 0; - right: 0; - left: 0; - bottom: 0; - z-index: 2000; + background: rgba(0, 0, 0, 0.2); + position: fixed; + top: 0; + right: 0; + left: 0; + bottom: 0; + z-index: 2000; } .loader-wrapper img { - width: 10%; - top: 40%; - left: 45%; - position: relative; + width: 10%; + top: 40%; + left: 45%; + position: relative; } .sweet-alert { - z-index: 10001; + z-index: 10001; } .sv-matrix .sv-matrix__cell { - min-width: 5em; + min-width: 5em; } // firewords animation http://jsfiddle.net/elin/7m3bL/ .pyro-on { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 1049; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 1049; } .pyro-on > .before, .pyro-on > .after { - position: absolute; - width: 5px; - height: 5px; - border-radius: 50%; - box-shadow: - -120px -218.66667px blue, - 248px -16.66667px #00ff84, - 190px 16.33333px #002bff, - -113px -308.66667px #ff009d, - -109px -287.66667px #ffb300, - -50px -313.66667px #ff006e, - 226px -31.66667px #ff4000, - 180px -351.66667px #ff00d0, - -12px -338.66667px #00f6ff, - 220px -388.66667px #99ff00, - -69px -27.66667px #ff0400, - -111px -339.66667px #6200ff, - 155px -237.66667px #00ddff, - -152px -380.66667px #00ffd0, - -50px -37.66667px #00ffdd, - -95px -175.66667px #a6ff00, - -88px 10.33333px #0d00ff, - 112px -309.66667px #005eff, - 69px -415.66667px #ff00a6, - 168px -100.66667px #ff004c, - -244px 24.33333px #ff6600, - 97px -325.66667px #ff0066, - -211px -182.66667px #00ffa2, - 236px -126.66667px #b700ff, - 140px -196.66667px #9000ff, - 125px -175.66667px #00bbff, - 118px -381.66667px #ff002f, - 144px -111.66667px #ffae00, - 36px -78.66667px #f600ff, - -63px -196.66667px #c800ff, - -218px -227.66667px #d4ff00, - -134px -377.66667px #ea00ff, - -36px -412.66667px #ff00d4, - 209px -106.66667px #00fff2, - 91px -278.66667px #000dff, - -22px -191.66667px #9dff00, - 139px -392.66667px #a6ff00, - 56px -2.66667px #0099ff, - -156px -276.66667px #ea00ff, - -163px -233.66667px #00fffb, - -238px -346.66667px #00ff73, - 62px -363.66667px #0088ff, - 244px -170.66667px #0062ff, - 224px -142.66667px #b300ff, - 141px -208.66667px #9000ff, - 211px -285.66667px #ff6600, - 181px -128.66667px #1e00ff, - 90px -123.66667px #c800ff, - 189px 70.33333px #00ffc8, - -18px -383.66667px #00ff33, - 100px -6.66667px #ff008c; - -moz-animation: - 1s bang ease-out infinite backwards, - 1s gravity ease-in infinite backwards, - 5s position linear infinite backwards; - -webkit-animation: - 1s bang ease-out infinite backwards, - 1s gravity ease-in infinite backwards, - 5s position linear infinite backwards; - -o-animation: - 1s bang ease-out infinite backwards, - 1s gravity ease-in infinite backwards, - 5s position linear infinite backwards; - -ms-animation: - 1s bang ease-out infinite backwards, - 1s gravity ease-in infinite backwards, - 5s position linear infinite backwards; - animation: - 1s bang ease-out infinite backwards, - 1s gravity ease-in infinite backwards, - 5s position linear infinite backwards; + position: absolute; + width: 5px; + height: 5px; + border-radius: 50%; + box-shadow: -120px -218.66667px blue, + 248px -16.66667px #00ff84, + 190px 16.33333px #002bff, + -113px -308.66667px #ff009d, + -109px -287.66667px #ffb300, + -50px -313.66667px #ff006e, + 226px -31.66667px #ff4000, + 180px -351.66667px #ff00d0, + -12px -338.66667px #00f6ff, + 220px -388.66667px #99ff00, + -69px -27.66667px #ff0400, + -111px -339.66667px #6200ff, + 155px -237.66667px #00ddff, + -152px -380.66667px #00ffd0, + -50px -37.66667px #00ffdd, + -95px -175.66667px #a6ff00, + -88px 10.33333px #0d00ff, + 112px -309.66667px #005eff, + 69px -415.66667px #ff00a6, + 168px -100.66667px #ff004c, + -244px 24.33333px #ff6600, + 97px -325.66667px #ff0066, + -211px -182.66667px #00ffa2, + 236px -126.66667px #b700ff, + 140px -196.66667px #9000ff, + 125px -175.66667px #00bbff, + 118px -381.66667px #ff002f, + 144px -111.66667px #ffae00, + 36px -78.66667px #f600ff, + -63px -196.66667px #c800ff, + -218px -227.66667px #d4ff00, + -134px -377.66667px #ea00ff, + -36px -412.66667px #ff00d4, + 209px -106.66667px #00fff2, + 91px -278.66667px #000dff, + -22px -191.66667px #9dff00, + 139px -392.66667px #a6ff00, + 56px -2.66667px #0099ff, + -156px -276.66667px #ea00ff, + -163px -233.66667px #00fffb, + -238px -346.66667px #00ff73, + 62px -363.66667px #0088ff, + 244px -170.66667px #0062ff, + 224px -142.66667px #b300ff, + 141px -208.66667px #9000ff, + 211px -285.66667px #ff6600, + 181px -128.66667px #1e00ff, + 90px -123.66667px #c800ff, + 189px 70.33333px #00ffc8, + -18px -383.66667px #00ff33, + 100px -6.66667px #ff008c; + -moz-animation: 1s bang ease-out infinite backwards, + 1s gravity ease-in infinite backwards, + 5s position linear infinite backwards; + -webkit-animation: 1s bang ease-out infinite backwards, + 1s gravity ease-in infinite backwards, + 5s position linear infinite backwards; + -o-animation: 1s bang ease-out infinite backwards, + 1s gravity ease-in infinite backwards, + 5s position linear infinite backwards; + -ms-animation: 1s bang ease-out infinite backwards, + 1s gravity ease-in infinite backwards, + 5s position linear infinite backwards; + animation: 1s bang ease-out infinite backwards, + 1s gravity ease-in infinite backwards, + 5s position linear infinite backwards; } .pyro-on > .after { - -moz-animation-delay: 1.25s, 1.25s, 1.25s; - -webkit-animation-delay: 1.25s, 1.25s, 1.25s; - -o-animation-delay: 1.25s, 1.25s, 1.25s; - -ms-animation-delay: 1.25s, 1.25s, 1.25s; - animation-delay: 1.25s, 1.25s, 1.25s; - -moz-animation-duration: 1.25s, 1.25s, 6.25s; - -webkit-animation-duration: 1.25s, 1.25s, 6.25s; - -o-animation-duration: 1.25s, 1.25s, 6.25s; - -ms-animation-duration: 1.25s, 1.25s, 6.25s; - animation-duration: 1.25s, 1.25s, 6.25s; + -moz-animation-delay: 1.25s, 1.25s, 1.25s; + -webkit-animation-delay: 1.25s, 1.25s, 1.25s; + -o-animation-delay: 1.25s, 1.25s, 1.25s; + -ms-animation-delay: 1.25s, 1.25s, 1.25s; + animation-delay: 1.25s, 1.25s, 1.25s; + -moz-animation-duration: 1.25s, 1.25s, 6.25s; + -webkit-animation-duration: 1.25s, 1.25s, 6.25s; + -o-animation-duration: 1.25s, 1.25s, 6.25s; + -ms-animation-duration: 1.25s, 1.25s, 6.25s; + animation-duration: 1.25s, 1.25s, 6.25s; } @-webkit-keyframes bang { - from { - box-shadow: - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white; - } + from { + box-shadow: 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white; + } } @-moz-keyframes bang { - from { - box-shadow: - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white; - } + from { + box-shadow: 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white; + } } @-o-keyframes bang { - from { - box-shadow: - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white; - } + from { + box-shadow: 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white; + } } @-ms-keyframes bang { - from { - box-shadow: - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white; - } + from { + box-shadow: 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white; + } } @keyframes bang { - from { - box-shadow: - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white, - 0 0 white; - } + from { + box-shadow: 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white, + 0 0 white; + } } @-webkit-keyframes gravity { - to { - transform: translateY(200px); - -moz-transform: translateY(200px); - -webkit-transform: translateY(200px); - -o-transform: translateY(200px); - -ms-transform: translateY(200px); - opacity: 0; - } + to { + transform: translateY(200px); + -moz-transform: translateY(200px); + -webkit-transform: translateY(200px); + -o-transform: translateY(200px); + -ms-transform: translateY(200px); + opacity: 0; + } } @-moz-keyframes gravity { - to { - transform: translateY(200px); - -moz-transform: translateY(200px); - -webkit-transform: translateY(200px); - -o-transform: translateY(200px); - -ms-transform: translateY(200px); - opacity: 0; - } + to { + transform: translateY(200px); + -moz-transform: translateY(200px); + -webkit-transform: translateY(200px); + -o-transform: translateY(200px); + -ms-transform: translateY(200px); + opacity: 0; + } } @-o-keyframes gravity { - to { - transform: translateY(200px); - -moz-transform: translateY(200px); - -webkit-transform: translateY(200px); - -o-transform: translateY(200px); - -ms-transform: translateY(200px); - opacity: 0; - } + to { + transform: translateY(200px); + -moz-transform: translateY(200px); + -webkit-transform: translateY(200px); + -o-transform: translateY(200px); + -ms-transform: translateY(200px); + opacity: 0; + } } @-ms-keyframes gravity { - to { - transform: translateY(200px); - -moz-transform: translateY(200px); - -webkit-transform: translateY(200px); - -o-transform: translateY(200px); - -ms-transform: translateY(200px); - opacity: 0; - } + to { + transform: translateY(200px); + -moz-transform: translateY(200px); + -webkit-transform: translateY(200px); + -o-transform: translateY(200px); + -ms-transform: translateY(200px); + opacity: 0; + } } @keyframes gravity { - to { - transform: translateY(200px); - -moz-transform: translateY(200px); - -webkit-transform: translateY(200px); - -o-transform: translateY(200px); - -ms-transform: translateY(200px); - opacity: 0; - } + to { + transform: translateY(200px); + -moz-transform: translateY(200px); + -webkit-transform: translateY(200px); + -o-transform: translateY(200px); + -ms-transform: translateY(200px); + opacity: 0; + } } @-webkit-keyframes position { - 0%, - 19.9% { - margin-top: 10%; - margin-left: 40%; - } - - 20%, - 39.9% { - margin-top: 40%; - margin-left: 30%; - } - - 40%, - 59.9% { - margin-top: 20%; - margin-left: 70%; - } - - 60%, - 79.9% { - margin-top: 30%; - margin-left: 20%; - } - - 80%, - 99.9% { - margin-top: 30%; - margin-left: 80%; - } + 0%, + 19.9% { + margin-top: 10%; + margin-left: 40%; + } + + 20%, + 39.9% { + margin-top: 40%; + margin-left: 30%; + } + + 40%, + 59.9% { + margin-top: 20%; + margin-left: 70%; + } + + 60%, + 79.9% { + margin-top: 30%; + margin-left: 20%; + } + + 80%, + 99.9% { + margin-top: 30%; + margin-left: 80%; + } } @-moz-keyframes position { - 0%, - 19.9% { - margin-top: 10%; - margin-left: 40%; - } - - 20%, - 39.9% { - margin-top: 40%; - margin-left: 30%; - } - - 40%, - 59.9% { - margin-top: 20%; - margin-left: 70%; - } - - 60%, - 79.9% { - margin-top: 30%; - margin-left: 20%; - } - - 80%, - 99.9% { - margin-top: 30%; - margin-left: 80%; - } + 0%, + 19.9% { + margin-top: 10%; + margin-left: 40%; + } + + 20%, + 39.9% { + margin-top: 40%; + margin-left: 30%; + } + + 40%, + 59.9% { + margin-top: 20%; + margin-left: 70%; + } + + 60%, + 79.9% { + margin-top: 30%; + margin-left: 20%; + } + + 80%, + 99.9% { + margin-top: 30%; + margin-left: 80%; + } } @-o-keyframes position { - 0%, - 19.9% { - margin-top: 10%; - margin-left: 40%; - } - - 20%, - 39.9% { - margin-top: 40%; - margin-left: 30%; - } - - 40%, - 59.9% { - margin-top: 20%; - margin-left: 70%; - } - - 60%, - 79.9% { - margin-top: 30%; - margin-left: 20%; - } - - 80%, - 99.9% { - margin-top: 30%; - margin-left: 80%; - } + 0%, + 19.9% { + margin-top: 10%; + margin-left: 40%; + } + + 20%, + 39.9% { + margin-top: 40%; + margin-left: 30%; + } + + 40%, + 59.9% { + margin-top: 20%; + margin-left: 70%; + } + + 60%, + 79.9% { + margin-top: 30%; + margin-left: 20%; + } + + 80%, + 99.9% { + margin-top: 30%; + margin-left: 80%; + } } @-ms-keyframes position { - 0%, - 19.9% { - margin-top: 10%; - margin-left: 40%; - } - - 20%, - 39.9% { - margin-top: 40%; - margin-left: 30%; - } - - 40%, - 59.9% { - margin-top: 20%; - margin-left: 70%; - } - - 60%, - 79.9% { - margin-top: 30%; - margin-left: 20%; - } - - 80%, - 99.9% { - margin-top: 30%; - margin-left: 80%; - } + 0%, + 19.9% { + margin-top: 10%; + margin-left: 40%; + } + + 20%, + 39.9% { + margin-top: 40%; + margin-left: 30%; + } + + 40%, + 59.9% { + margin-top: 20%; + margin-left: 70%; + } + + 60%, + 79.9% { + margin-top: 30%; + margin-left: 20%; + } + + 80%, + 99.9% { + margin-top: 30%; + margin-left: 80%; + } } @keyframes position { - 0%, - 19.9% { - margin-top: 10%; - margin-left: 40%; - } - - 20%, - 39.9% { - margin-top: 40%; - margin-left: 30%; - } - - 40%, - 59.9% { - margin-top: 20%; - margin-left: 70%; - } - - 60%, - 79.9% { - margin-top: 30%; - margin-left: 20%; - } - - 80%, - 99.9% { - margin-top: 30%; - margin-left: 80%; - } + 0%, + 19.9% { + margin-top: 10%; + margin-left: 40%; + } + + 20%, + 39.9% { + margin-top: 40%; + margin-left: 30%; + } + + 40%, + 59.9% { + margin-top: 20%; + margin-left: 70%; + } + + 60%, + 79.9% { + margin-top: 30%; + margin-left: 20%; + } + + 80%, + 99.9% { + margin-top: 30%; + margin-left: 80%; + } } .project-toast { - line-height: 1.5rem; + line-height: 1.5rem; - h3 { - text-align: center; - font-weight: bold; - color: white; - } + h3 { + text-align: center; + font-weight: bold; + color: white; + } - span { - color: white; - } + span { + color: white; + } } .jq-toast-wrap { - min-width: 450px; - z-index: 10002 !important; + min-width: 450px; + z-index: 10002 !important; - .close-jq-toast-single { - font-size: 35px; - top: 10px; - } + .close-jq-toast-single { + font-size: 35px; + top: 10px; + } } @media (max-width: 576px) { - .jq-toast-wrap.bottom-right { - width: calc(100% - 60px); - min-width: auto; - bottom: 20px; - right: 30px; - } + .jq-toast-wrap.bottom-right { + width: calc(100% - 60px); + min-width: auto; + bottom: 20px; + right: 30px; + } } diff --git a/resources/views/crowdsourcing-project/partials/motto.blade.php b/resources/views/crowdsourcing-project/partials/motto.blade.php index 4a5e84a9..60f9d419 100644 --- a/resources/views/crowdsourcing-project/partials/motto.blade.php +++ b/resources/views/crowdsourcing-project/partials/motto.blade.php @@ -2,105 +2,104 @@ style="background-image: url({{asset($viewModel->project->img_path)}});">
-
+
-
-
-
-

{!! $viewModel->project->currentTranslation->motto_title !!}

-
-
- @if($viewModel->project->currentTranslation->motto_subtitle) -
-
-

{!! $viewModel->project->currentTranslation->motto_subtitle !!}

+
+
+
+
+

{!! $viewModel->project->currentTranslation->motto_title !!}

+ @if($viewModel->project->currentTranslation->motto_subtitle) +

{!! $viewModel->project->currentTranslation->motto_subtitle !!}

+ @endif
- @endif -
-
-
-
- {{-- PROJECT HAVE AN ACTIVE QUESTIONNAIRE --}} - @if($viewModel->questionnaire) - {{-- USER RESPONDED TO THE QUESTIONNAIRE --}} - @if($viewModel->userResponse) -
-

- @if(!$viewModel->thankYouMode) - {{ __("questionnaire.already_answered") }} - @endif - @if($viewModel->thankYouMode && isset($badge)) -
-
-
- @include('gamification.badge-single', ['badge' => $badge]) -
-
- @if(\Illuminate\Support\Facades\Auth::check()) -
-
-

{{ __('questionnaire.visit_dashboard_and_invite') }}

+
+
+
+
+ {{-- PROJECT HAVE AN ACTIVE QUESTIONNAIRE --}} + @if($viewModel->questionnaire) + {{-- USER RESPONDED TO THE QUESTIONNAIRE --}} + @if($viewModel->userResponse) +
+

+ @if(!$viewModel->thankYouMode) + {{ __("questionnaire.already_answered") }} + @endif + @if($viewModel->thankYouMode && isset($badge)) +
+
+
+ @include('gamification.badge-single', ['badge' => $badge])
-
-
- - {{ __("menu.my_dashboard") }} - + @if(\Illuminate\Support\Facades\Auth::check()) +
+
+

{{ __('questionnaire.visit_dashboard_and_invite') }}

+
-
- @endif -
- @endif -
- {{ __("questionnaire.thank_you_for_your_response") }} +
+
+ + {{ __("menu.my_dashboard") }} + +
+
+ @endif +
+ @endif +
+ {{ __("questionnaire.thank_you_for_your_response") }} - {{-- IF HE HAS RESPONDEDED TO THE FEEDBACK ALREADY, DISPLAY THE TITLE TO INVITE TO SHARE ON SOCIAL--}} - @if (!$viewModel->displayFeedbackQuestionnaire() && $viewModel->shareUrlForFacebook!=null && $viewModel->shareUrlForTwitter!=null) - {{ __("questionnaire.invite_your_friends_to_answer")}}: - @endif -

-
- {{-- IF HE HAS NOT RESPONDEDED TO THE FEEDBACK, INVITE HIM TO DO SO--}} - @if ($viewModel->displayFeedbackQuestionnaire()) -
- - {{__("questionnaire.give_us_feedback")}} - + {{-- IF HE HAS RESPONDEDED TO THE FEEDBACK ALREADY, DISPLAY THE TITLE TO INVITE TO SHARE ON SOCIAL--}} + @if (!$viewModel->displayFeedbackQuestionnaire() && $viewModel->shareUrlForFacebook!=null && $viewModel->shareUrlForTwitter!=null) + {{ __("questionnaire.invite_your_friends_to_answer")}}: + @endif +

- @else -
- {{-- DISPLAY SHARE THE QUESTIONNARE --}} - @if($viewModel->shareUrlForFacebook || $viewModel->shareUrlForTwitter) + {{-- IF HE HAS NOT RESPONDEDED TO THE FEEDBACK, INVITE HIM TO DO SO--}} + @if ($viewModel->displayFeedbackQuestionnaire()) +
+ + {{__("questionnaire.give_us_feedback")}} + +
+ @else +
+ {{-- DISPLAY SHARE THE QUESTIONNARE --}} + @if($viewModel->shareUrlForFacebook || $viewModel->shareUrlForTwitter) - @include('crowdsourcing-project.partials.share-questionnaire-on-social', ["viewModel"=>$viewModel]) + @include('crowdsourcing-project.partials.share-questionnaire-on-social', ["viewModel"=>$viewModel]) - @endif -
+ @endif +
+ @endif + @else + {{-- INVITE HIM TO RESPOND TO THE PROJECT QUESTIONNAIRE --}} +
+ + {{__("questionnaire.answer_the_questionnaire")}} + +
@endif + @elseif($viewModel->projectHasPublishedProblems) + + {{__("project-problems.project_landing_page_problems_action_button")}} @else - {{-- INVITE HIM TO RESPOND TO THE PROJECT QUESTIONNAIRE --}} -
- - {{__("questionnaire.answer_the_questionnaire")}} - -
+ @include('crowdsourcing-project.partials.external-url') @endif - @elseif($viewModel->projectHasPublishedProblems) - - {{__("project-problems.project_landing_page_problems_action_button")}} - @else - @include('crowdsourcing-project.partials.external-url') - @endif +
diff --git a/resources/views/home/home.blade.php b/resources/views/home/home.blade.php index 97ecb010..b75947cb 100644 --- a/resources/views/home/home.blade.php +++ b/resources/views/home/home.blade.php @@ -1,16 +1,16 @@ @extends('home.layout') @section('content') -
+
@include('home.partials.motto')
-
+
@include('home.partials.' . config('app.installation_resources_dir') . '.about-us')
-
+
@include('home.partials.' . config('app.installation_resources_dir') . '.projects')
-
+
@include('home.partials.features')
diff --git a/resources/views/home/partials/ecas/about-us.blade.php b/resources/views/home/partials/ecas/about-us.blade.php index d9a7fec1..34b507df 100644 --- a/resources/views/home/partials/ecas/about-us.blade.php +++ b/resources/views/home/partials/ecas/about-us.blade.php @@ -1,5 +1,5 @@
-
+
diff --git a/resources/views/home/partials/ecas/projects.blade.php b/resources/views/home/partials/ecas/projects.blade.php index ea5b2ab9..6d53f4e0 100644 --- a/resources/views/home/partials/ecas/projects.blade.php +++ b/resources/views/home/partials/ecas/projects.blade.php @@ -2,11 +2,15 @@

What are we crowdsourcing?

-
-

ECAS crowdsourcing platform hosts various projects. Please check below those - that are the currently active and waiting for your contribution. - Please visit a project's page and make an impact by answering just a couple of questions!

- +
+
+
+

ECAS crowdsourcing platform hosts various projects. Please check below those + that are the currently active and waiting for your contribution. + Please visit a project's page and make an impact by answering just a couple of + questions!

+
+
@include('home.partials.projects-list-home')
diff --git a/resources/views/home/partials/features.blade.php b/resources/views/home/partials/features.blade.php index f77e6aac..581bba08 100644 --- a/resources/views/home/partials/features.blade.php +++ b/resources/views/home/partials/features.blade.php @@ -1,22 +1,23 @@
-

Features

+

Features

-
    + -
    +
    - participate + participate

    Join our crowdsourcing platform in order to make your voice heard! You may contribute to our mission by speaking up and providing your own input.

    @@ -24,12 +25,14 @@

    Check the impact of your contribution, after the citizens opinions transform into a publicly available report.

    - impact + impact

    Check the impact of your contribution, after the citizens opinions transform into a publicly available report.

    - keep track + keep track

    Keep track of your responses and stay informed about other active projects.

    @@ -37,12 +40,14 @@

    Invite your friends to contribute to projects that actually matter.

    - invite + invite

    Invite your friends to contribute to projects that actually matter.

    - celebrating + celebrating

    Win awards as a "thank you" for your impact in our causes.

    @@ -68,7 +73,8 @@ use questionnaire editor.

    - integrate + integrate

    Integrate with MailChimp in just a click, to keep users always up to date with the latest projects and activities.

    diff --git a/resources/views/home/partials/motto.blade.php b/resources/views/home/partials/motto.blade.php index ac40f35e..5372420c 100644 --- a/resources/views/home/partials/motto.blade.php +++ b/resources/views/home/partials/motto.blade.php @@ -2,18 +2,18 @@
    -
    +
    -
    +
    -
    +

    Let's crowdsource!
    Taking decisions with citizens and not for them

    -
    +
    Share your ideas
    diff --git a/resources/views/home/partials/projects-list-home.blade.php b/resources/views/home/partials/projects-list-home.blade.php index 80f8eadb..51e23174 100644 --- a/resources/views/home/partials/projects-list-home.blade.php +++ b/resources/views/home/partials/projects-list-home.blade.php @@ -5,22 +5,28 @@
    - {!! $project->currentTranslation->motto_title !!} +

    {!! $project->currentTranslation->motto_title !!}

    -
    - @if(($project->latestQuestionnaire && $project->latestQuestionnaire->status_id == \App\BusinessLogicLayer\lkp\QuestionnaireStatusLkp::PUBLISHED) || $project->problems) - - {{ isset($projectBtnText) ? $projectBtnText : 'Contribute' }} - - @else - View - - @endif +
    +
    +
    +
    + @if(($project->latestQuestionnaire && $project->latestQuestionnaire->status_id == \App\BusinessLogicLayer\lkp\QuestionnaireStatusLkp::PUBLISHED) || $project->problems) + + {{ isset($projectBtnText) ? $projectBtnText : 'Contribute' }} + + @else + View + + @endif +
    +
    +
    diff --git a/resources/views/home/partials/together/about-us.blade.php b/resources/views/home/partials/together/about-us.blade.php index 91dce2b9..010b90d2 100644 --- a/resources/views/home/partials/together/about-us.blade.php +++ b/resources/views/home/partials/together/about-us.blade.php @@ -1,5 +1,5 @@
    -
    +
    diff --git a/resources/views/home/partials/together/projects.blade.php b/resources/views/home/partials/together/projects.blade.php index 329b81c0..78c79634 100644 --- a/resources/views/home/partials/together/projects.blade.php +++ b/resources/views/home/partials/together/projects.blade.php @@ -2,11 +2,16 @@

    What are we crowdsourcing?

    -
    -

    The "Together" crowdsourcing platform hosts various projects. Please check below those - that are the currently active and waiting for your contribution. - Please visit a project's page and make an impact by answering just a couple of questions!

    - +
    +
    +
    +

    The "Together" crowdsourcing platform hosts various projects. Please check + below those + that are the currently active and waiting for your contribution. + Please visit a project's page and make an impact by answering just a couple of questions! +

    +
    +
    @include('home.partials.projects-list-home')