You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
621 lines
11 KiB
621 lines
11 KiB
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
|
|
|
|
:root {
|
|
--primary-color: rgb(17, 153, 158);
|
|
--secondary-color: rgb(228, 249, 245);
|
|
--btn-bg: rgba(255, 77, 77, 0.4);
|
|
--text-color: rgba(10, 10, 10, 1);
|
|
--option-1: rgb(48, 227, 202);
|
|
--option-1-faded: rgba(48, 227, 202, 0.2);
|
|
--option-2: rgb(64, 81, 78);
|
|
--option-2-faded: rgba(64, 81, 78, 0.6);
|
|
--background-img: linear-gradient(
|
|
to top left,
|
|
var(--primary-color),
|
|
var(--option-2)
|
|
);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html {
|
|
font-size: 10px;
|
|
}
|
|
|
|
body {
|
|
position: relative;
|
|
min-height: 100vh;
|
|
height: 100%;
|
|
font-family: 'Lato', sans-serif;
|
|
background-color: var(--secondary-color);
|
|
color: var(--text-color);
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Intro container with a brief description of the Application */
|
|
.introduction {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 100vh;
|
|
z-index: 1;
|
|
margin: 0;
|
|
color: white;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: url('./images/campaign-creators-pypeCEaJeZY-unsplash.jpg') center
|
|
center no-repeat;
|
|
z-index: 1;
|
|
transition: all 1s ease-out;
|
|
opacity: 1;
|
|
}
|
|
|
|
.introduction.hide {
|
|
opacity: 0;
|
|
}
|
|
|
|
.introduction::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
.introduction button {
|
|
z-index: 1;
|
|
display: block;
|
|
width: 40%;
|
|
padding: 2rem;
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.introduction h1 {
|
|
z-index: 1;
|
|
font-size: 4rem;
|
|
}
|
|
|
|
.introduction .intro-details {
|
|
width: 50%;
|
|
text-align: justify;
|
|
line-height: 1.7;
|
|
font-size: 2rem;
|
|
padding: 3rem 0 2rem;
|
|
color: white;
|
|
z-index: 1;
|
|
}
|
|
|
|
.introduction .intro-footer {
|
|
position: absolute;
|
|
bottom: 5px;
|
|
left: 20px;
|
|
}
|
|
|
|
#main-content {
|
|
display: none;
|
|
}
|
|
|
|
/*Header */
|
|
.header-section {
|
|
display: Flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 1rem;
|
|
padding: 2rem 5rem;
|
|
background-image: var(--background-img);
|
|
color: var(--secondary-color);
|
|
font-weight: bold;
|
|
transition: all 1s ease-in;
|
|
transform: translateY(0);
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.header-section .info {
|
|
letter-spacing: 1.3px;
|
|
}
|
|
|
|
/* The main container holds the configuration and the table container*/
|
|
.main-container {
|
|
display: Flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 1rem;
|
|
}
|
|
|
|
/* Number of rows and generate File Button */
|
|
.config {
|
|
padding: 2rem 3rem;
|
|
border-radius: 1rem;
|
|
margin-bottom: 1rem;
|
|
font-size: 1.6rem;
|
|
display: flex;
|
|
flex-direction: row;
|
|
position: relative;
|
|
}
|
|
|
|
.config .row-count-input {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 5px;
|
|
position: relative;
|
|
width: inherit;
|
|
}
|
|
|
|
.config input {
|
|
margin-top: 0.5rem;
|
|
width: 80%;
|
|
}
|
|
|
|
.config .buttons {
|
|
margin-top: 1.5rem;
|
|
}
|
|
/* End of number of rows and generate file Button */
|
|
|
|
/* container and the entire column/row set */
|
|
.data-input-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
align-items: center;
|
|
}
|
|
|
|
.header {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
max-width: 600px;
|
|
width: 75%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.6s ease-in-out;
|
|
transform: translateX(0%);
|
|
opacity: 1;
|
|
position: relative;
|
|
align-items: flex-start;
|
|
box-shadow: 2px 0px 3px var(--option-2);
|
|
}
|
|
.row.hide {
|
|
transform: translateX(-100%);
|
|
opacity: 0;
|
|
}
|
|
.row:nth-child(odd) {
|
|
background-color: var(--option-2-faded);
|
|
}
|
|
.row:nth-child(even) {
|
|
background-color: var(--option-1-faded);
|
|
}
|
|
.row:first-child {
|
|
background-color: var(--option-2);
|
|
color: rgba(223, 249, 251, 1);
|
|
border-top-left-radius: 10px;
|
|
border-top-right-radius: 10px;
|
|
}
|
|
.row:last-child {
|
|
border-bottom-left-radius: 10px;
|
|
border-bottom-right-radius: 10px;
|
|
box-shadow: 2px 2px 3px var(--option-2);
|
|
}
|
|
|
|
.column {
|
|
width: 40%;
|
|
padding: 1rem;
|
|
margin: 0 1rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
height: initial;
|
|
position: relative;
|
|
}
|
|
|
|
.column.actions {
|
|
display: flex;
|
|
width: 20%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.actions button:first-child {
|
|
margin-right: 2rem;
|
|
}
|
|
|
|
.actions button {
|
|
cursor: pointer;
|
|
display: relative;
|
|
border: 0;
|
|
margin: 0;
|
|
background-color: transparent;
|
|
outline: 0;
|
|
}
|
|
|
|
.btn {
|
|
padding: 1rem 3rem;
|
|
margin: 1rem;
|
|
border-radius: 1rem;
|
|
cursor: pointer;
|
|
background-image: var(--background-img);
|
|
color: white;
|
|
font-size: 1.6rem;
|
|
border: 0;
|
|
border: 2px solid var(--btn-bg);
|
|
transform: translateX(0);
|
|
transition: transform 0.5s ease-in;
|
|
outline: 0;
|
|
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.btn:hover,
|
|
.btn:focus {
|
|
border: 2px solid var(--option-2-faded);
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
/* Tool tip for Number of Rows */
|
|
.help-tip {
|
|
position: absolute;
|
|
top: 18px;
|
|
right: 18px;
|
|
text-align: center;
|
|
background-color: #bcdbea;
|
|
border-radius: 50%;
|
|
width: 24px;
|
|
height: 24px;
|
|
font-size: 1.4rem;
|
|
line-height: 26px;
|
|
cursor: default;
|
|
}
|
|
|
|
.help-tip:before {
|
|
content: '?';
|
|
font-weight: bold;
|
|
color: #fff;
|
|
}
|
|
|
|
.help-tip:hover p {
|
|
display: block;
|
|
transform-origin: 100% 0%;
|
|
-webkit-animation: fadeIn 0.3s ease-in-out;
|
|
animation: fadeIn 0.3s ease-in-out;
|
|
}
|
|
|
|
.help-tip p {
|
|
/* The tooltip */
|
|
display: none;
|
|
text-align: left;
|
|
background-image: var(--background-img);
|
|
padding: 1rem;
|
|
width: 300px;
|
|
position: absolute;
|
|
border-radius: 3px;
|
|
box-shadow: 1px 5px 5px rgba(0, 0, 0, 0.2);
|
|
right: -4px;
|
|
color: #fff;
|
|
font-size: 1, 5rem;
|
|
line-height: 1.4;
|
|
z-index: 2;
|
|
}
|
|
|
|
.help-tip p:before {
|
|
/* The pointer of the tooltip */
|
|
position: absolute;
|
|
content: '';
|
|
width: 0;
|
|
height: 0;
|
|
border: 6px solid transparent;
|
|
border-bottom-color: #1e2021;
|
|
right: 10px;
|
|
top: -12px;
|
|
}
|
|
|
|
.help-tip p:after {
|
|
/* Prevents the tooltip from being hidden */
|
|
width: 100%;
|
|
height: 40px;
|
|
content: '';
|
|
position: absolute;
|
|
top: -40px;
|
|
left: 0;
|
|
}
|
|
|
|
/* For the Column Name and Option Grid Elements */
|
|
input,
|
|
.inputSelection {
|
|
border-radius: 5px;
|
|
padding: 0.5rem 1rem;
|
|
font-size: 1.4rem;
|
|
width: 100%;
|
|
margin: 0;
|
|
border-radius: 0.5em;
|
|
box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04);
|
|
background-color: #fff;
|
|
outline: none;
|
|
position: relative;
|
|
}
|
|
|
|
.inputSelection {
|
|
cursor: pointer;
|
|
}
|
|
|
|
input:focus,
|
|
.inputSelection:focus {
|
|
border-color: #aaa;
|
|
box-shadow: 0 0 1px 3px rgba(59, 153, 252, 0.7);
|
|
box-shadow: 0 0 0 3px -moz-mac-focusring;
|
|
color: #000;
|
|
}
|
|
|
|
.inputSelection i {
|
|
position: absolute;
|
|
right: 0;
|
|
transform: translateX(-100%) translateY(15%);
|
|
pointer-events: none;
|
|
}
|
|
/* End of Column Name and Option Grid Elements */
|
|
|
|
/* CSS for the tool tip for Add and Delete Row */
|
|
.actions button .tooltiptext {
|
|
visibility: hidden;
|
|
width: fit-content;
|
|
background-color: black;
|
|
color: #fff;
|
|
text-align: center;
|
|
padding: 8px 8px;
|
|
border-radius: 6px;
|
|
position: absolute;
|
|
z-index: 1000;
|
|
transform: translateX(-120%) translateY(40%);
|
|
}
|
|
|
|
.actions button:hover .tooltiptext,
|
|
.actions button:focus .tooltiptext {
|
|
visibility: visible;
|
|
}
|
|
|
|
/* Second section of the main container containing the questions and answers */
|
|
.additional-details {
|
|
font-size: 1.5rem;
|
|
padding: 1rem 5rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.additional-details h3,
|
|
.additional-details p {
|
|
margin-top: 1.5rem;
|
|
}
|
|
/* End of Second Section */
|
|
|
|
/* Option selector popup Start */
|
|
.select-input-background {
|
|
display: none;
|
|
}
|
|
|
|
.select-input-background.show {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: top;
|
|
}
|
|
|
|
.select-input-background.show .select-input-container {
|
|
justify-content: space-between;
|
|
margin: auto;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
border-radius: 1rem;
|
|
display: flex;
|
|
position: relative;
|
|
width: 70%;
|
|
top: 20vh;
|
|
position: absolute;
|
|
}
|
|
|
|
.optionGroup {
|
|
font-size: 1.6rem;
|
|
cursor: pointer;
|
|
padding: 0.5rem 0 0.5rem;
|
|
}
|
|
|
|
.select-input-container .selectOption {
|
|
margin: 0.3rem;
|
|
padding: 0.8rem 1.6rem;
|
|
}
|
|
|
|
.select-input-container .select-input-classification {
|
|
height: max-content;
|
|
width: 25%;
|
|
padding: 1rem 2.4rem;
|
|
}
|
|
|
|
.select-input-classification h2 {
|
|
padding-bottom: 1rem;
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
.select-input-container .close {
|
|
cursor: pointer;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
font-size: 1.4rem;
|
|
font-weight: bold;
|
|
padding: 1rem 1.2rem;
|
|
border-radius: 50%;
|
|
background-color: #d9455f;
|
|
transform: translateX(50%) translateY(-50%) scale(1);
|
|
outline: none;
|
|
transition: all 1s ease-in;
|
|
outline: none;
|
|
}
|
|
|
|
.select-input-background.show .select-input-container .close:hover {
|
|
transform: translateX(50%) translateY(-50%) scale(1.3);
|
|
}
|
|
|
|
.select-input-options {
|
|
width: 75%;
|
|
padding: 1rem 2.6rem;
|
|
border-left: 4px solid var(--primary-color);
|
|
box-shadow: 2px 2px 5px var(--option-2);
|
|
border-radius: 1rem;
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
margin: 1rem 1rem 1rem 2rem;
|
|
}
|
|
/* Option selector popup End */
|
|
|
|
/* Footer Start */
|
|
footer {
|
|
width: 100%;
|
|
background-image: var(--background-img);
|
|
color: var(--secondary-color);
|
|
margin: 0 auto;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
border: 1px solid;
|
|
padding: 1rem 1rem 0.5rem 1rem;
|
|
margin-top: 2rem;
|
|
font-size: 2rem;
|
|
}
|
|
|
|
footer i {
|
|
font-size: 3rem;
|
|
padding: 1rem 3rem;
|
|
color: var(--secondary-color);
|
|
}
|
|
|
|
footer .display-pic {
|
|
height: 10rem;
|
|
border-radius: 50%;
|
|
border-style: solid;
|
|
border-color: #393e46;
|
|
border-width: 3px;
|
|
margin-right: 3rem;
|
|
}
|
|
|
|
footer .contact {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
footer .contact-details {
|
|
margin-top: 1rem;
|
|
}
|
|
/* Footer End */
|
|
|
|
/* CSS animation */
|
|
@-webkit-keyframes fadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0.6);
|
|
}
|
|
|
|
100% {
|
|
opacity: 100%;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 100%;
|
|
}
|
|
}
|
|
|
|
/* On screens that are 992px wide or less*/
|
|
@media screen and (max-width: 992px) {
|
|
html {
|
|
font-size: 9px;
|
|
}
|
|
|
|
.introduction .intro-details {
|
|
width: 70%;
|
|
line-height: 1.6;
|
|
font-size: 1.8rem;
|
|
padding: 3rem 0 2rem;
|
|
}
|
|
.header-section {
|
|
font-size: 1.8rem;
|
|
padding: 2rem 1rem;
|
|
flex-direction: column;
|
|
}
|
|
.row {
|
|
width: 80%;
|
|
box-shadow: 2px 0px 3px var(--option-2);
|
|
}
|
|
.select-input-background.show .select-input-container {
|
|
width: 90%;
|
|
}
|
|
.select-input-container .btn {
|
|
padding: 1.2rem;
|
|
margin: 0.5rem;
|
|
}
|
|
.select-input-options {
|
|
padding: 1rem;
|
|
width: 75%;
|
|
}
|
|
.select-input-classification {
|
|
width: 25%;
|
|
}
|
|
}
|
|
|
|
/* On screens that are 600px wide or less*/
|
|
@media screen and (max-width: 600px) {
|
|
html {
|
|
font-size: 8px;
|
|
}
|
|
|
|
.introduction .intro-details {
|
|
width: 80%;
|
|
line-height: 1.6;
|
|
font-size: 1.8rem;
|
|
padding: 3rem 0 2rem;
|
|
}
|
|
|
|
.header-section {
|
|
flex-direction: column;
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
.header-section .info {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.row {
|
|
width: 90%;
|
|
}
|
|
.select-input-container {
|
|
width: 80%;
|
|
}
|
|
.select-input-container .btn {
|
|
padding: 1rem;
|
|
margin: 0.3rem;
|
|
}
|
|
|
|
.select-input-options {
|
|
padding: 1rem;
|
|
width: 75%;
|
|
}
|
|
.select-input-classification {
|
|
width: 25%;
|
|
}
|
|
}
|
|
|