mirror of
https://github.com/kidwellj/SelfAssessmentUOB.git
synced 2024-12-04 21:42:21 +00:00
392 lines
6.4 KiB
CSS
392 lines
6.4 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap');
|
|
|
|
|
|
|
|
@media print {
|
|
*{
|
|
margin-bottom:0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
font-family: 'Source Sans Pro', sans-serif;
|
|
}
|
|
.graphicSlider,.print,.buttons,h4,legend, #intro-heading{
|
|
display: none;
|
|
}
|
|
fieldset{
|
|
border: none;
|
|
}
|
|
h2,h3{
|
|
font-weight: bold;
|
|
}
|
|
.part{
|
|
font-weight: normal;
|
|
}
|
|
.logo{
|
|
display:none;
|
|
}
|
|
.logoprint{
|
|
height: 10vh;
|
|
}
|
|
}
|
|
|
|
@media only screen {
|
|
*{
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
font-family: 'Source Sans Pro', sans-serif;
|
|
}
|
|
|
|
html,body{
|
|
display: flex;
|
|
flex-flow: column;
|
|
text-align: center;
|
|
background: #FFF8F0;
|
|
color: #392F5A;
|
|
/*background-image: linear-gradient(#FFF8F0,#59BEB3,#FFF8F0);*/
|
|
/*overflow: scroll;*/
|
|
}
|
|
input{
|
|
margin-bottom:2vh;
|
|
}
|
|
|
|
.scrollindicator{
|
|
width: 100%;
|
|
height: 2vh; /* height of progress bar */
|
|
display: block;
|
|
background: white;
|
|
left: 0;
|
|
top: 0; /* dock progress bar to bottom of page (change to "top" for top instead) */
|
|
cursor: pointer;
|
|
position: fixed;
|
|
z-index: 1000000;
|
|
visibility: hidden;
|
|
-webkit-transition: height .2s ease;
|
|
transition: height .2s ease;
|
|
}
|
|
|
|
.scrollprogress{
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #59BEB3; /* background color of progress bar */
|
|
-webkit-transform: translate3d(-100%,0,0);
|
|
transform: translate3d(-100%,0,0);
|
|
=-webkit-transition: -webkit-transform .4s ease;
|
|
transition: transform .4s ease; /* animate progress bar? Remove to disable */
|
|
}
|
|
header{
|
|
position: fixed;
|
|
z-index: 5;
|
|
background: #FFF8F0;
|
|
margin-top: 1vh;
|
|
height:15vh;
|
|
}
|
|
|
|
/*columns, buttons have a container*/
|
|
.cont0, .cont1,.cont2,.cont2a, .cont3,.subtitle,.multiple-choice{
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.cont0{
|
|
width:100%;
|
|
align-items: center;
|
|
}
|
|
.cont1 {
|
|
width: 30%;
|
|
align-items: flex-end;
|
|
height: 100%;
|
|
}
|
|
.cont2{
|
|
width:100%;
|
|
align-items: flex-start;
|
|
padding-left: 4vh;
|
|
text-align: left;
|
|
}
|
|
.form{
|
|
width:100%;
|
|
align-items:center;
|
|
|
|
|
|
}
|
|
.cont2a{
|
|
width:100%;
|
|
/*align-items:center;*/
|
|
height: auto;
|
|
padding-left: 2rem;
|
|
}
|
|
.cont3 {
|
|
width: 25%;
|
|
align-items: flex-start;
|
|
height: auto;
|
|
}
|
|
.buttons{
|
|
display: inline-flex;
|
|
justify-content: space-between;
|
|
/*position: relative;*/
|
|
margin-top:3vh;
|
|
width:60%;
|
|
}
|
|
|
|
.pad{
|
|
height: 10vh;
|
|
}
|
|
|
|
.logo{
|
|
height: 10vh;
|
|
}
|
|
.logoprint{
|
|
display:none;
|
|
}
|
|
|
|
.space{
|
|
height:15vh;
|
|
}
|
|
|
|
.intro{
|
|
text-align: left;
|
|
}
|
|
|
|
.multiple-choice{
|
|
text-align: left;
|
|
}
|
|
/* progress bar */
|
|
h1{
|
|
font-weight: bolder;
|
|
margin-bottom: 0;
|
|
margin-top: 1.33rem;
|
|
}
|
|
#textprogress{
|
|
display: none;
|
|
}
|
|
progress {
|
|
appearance:none;
|
|
height:.66rem;
|
|
margin-top: .66rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
progress::-webkit-progress-bar {
|
|
background-color: white;
|
|
border-radius:.33rem;
|
|
}
|
|
progress::-webkit-progress-value {
|
|
background-color: #59BEB3;
|
|
border-radius:.33rem;
|
|
}
|
|
|
|
fieldset{
|
|
border: none;
|
|
}
|
|
legend{
|
|
display: none;
|
|
}
|
|
/*subtitle*/
|
|
.subtitle{
|
|
margin-top: 1vh;
|
|
margin-bottom: auto;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
width:80%;
|
|
}
|
|
h2 {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/*questions*/
|
|
/*includes environment and participation*/
|
|
.block-question, .block-question2{
|
|
/*align-items: center;*/
|
|
padding-top:1rem;
|
|
margin-bottom: 2rem;
|
|
/*display: inline-flex;*/
|
|
width:80%;
|
|
display: flex;
|
|
flex-flow: column;
|
|
align-items: flex-end;
|
|
|
|
}
|
|
.block-question2{
|
|
/*background: #FEF9ED;*/
|
|
}
|
|
h3{
|
|
font-weight: bold;
|
|
/*display: inline-flex;*/
|
|
margin-bottom: auto;
|
|
text-align: left;
|
|
/*align-items: flex-start;*/
|
|
}
|
|
|
|
.part{
|
|
margin-top:1vh;
|
|
margin-bottom: 1vh;
|
|
font-weight: normal;
|
|
}
|
|
|
|
h4{
|
|
text-align: left;
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.questionText,.phrase{
|
|
width:80%;
|
|
padding:0;
|
|
|
|
}
|
|
|
|
.questionText{
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
display: block;
|
|
}
|
|
.phrase{
|
|
display: inline-flex;
|
|
margin-bottom: 1rem;
|
|
position: relative;
|
|
justify-content: center;
|
|
height: 6vh;
|
|
}
|
|
|
|
/* slider */
|
|
.graphicSlider{
|
|
display: inline-flex;
|
|
flex-flow: row;
|
|
width:80%;
|
|
padding: 0;
|
|
}
|
|
.range{
|
|
/*display: inline-grid;*/
|
|
margin-bottom: 3vh;
|
|
width:100%;
|
|
|
|
}
|
|
|
|
/*emojis and signs*/
|
|
.sign-left, .sign-right{
|
|
font-size: 6vh;
|
|
color: #ED7600;
|
|
/*line-height: 5%;*/
|
|
/*top:.66rem;*/
|
|
}
|
|
.sign-left,.emoji-left{
|
|
text-align: left;
|
|
margin-right: .5rem;
|
|
}
|
|
.sign-right,.emoji-right{
|
|
text-align: right;
|
|
margin-left:.5rem;
|
|
}
|
|
.emoji-right, .emoji-left{
|
|
font-size: 3vh;
|
|
}
|
|
|
|
|
|
.range input{
|
|
-webkit-appearance: none;
|
|
width: 100%;
|
|
height: .8vh;
|
|
background: #ED7600;/*naranja*/
|
|
border-radius: .33rem;
|
|
outline: none;
|
|
border: none;
|
|
z-index: 2222;
|
|
margin-top: 2.1rem;
|
|
}
|
|
.range input:hover{
|
|
cursor: pointer;
|
|
}
|
|
.range input::-webkit-slider-thumb{
|
|
-webkit-appearance: none;
|
|
cursor: pointer;
|
|
height:2.5rem;
|
|
width:2.5rem;
|
|
background: #59BEB3;
|
|
border: .2rem solid white;
|
|
/*z-index: -1;*/
|
|
transform: translateY(-80%)rotate(45deg);
|
|
box-shadow: 3px 3px 2px rgba(0,0,0,0.1);
|
|
border-bottom-left-radius:50%;
|
|
border-top-left-radius: 50%;
|
|
border-top-right-radius: 50%;
|
|
}
|
|
|
|
|
|
.range input::-moz-range-thumb{
|
|
-webkit-appearance: none;
|
|
width: 1.33rem;
|
|
height: 1.33rem;
|
|
background: red;
|
|
border-radius: 50%;
|
|
/*background-image: radial-gradient(#59BEB3,#59BEB3,#59BEB3,#FFF8F0);*/
|
|
background: #59BEB3;
|
|
border: .0667rem solid #59BEB3;
|
|
cursor: pointer;
|
|
}
|
|
.range input::-moz-range-progress{
|
|
background: #664AFF; //this progress background is only shown on Firefox
|
|
}
|
|
|
|
|
|
|
|
/*buttons*/
|
|
/*footer{
|
|
display: flex;
|
|
flex-flow: column;
|
|
}*/
|
|
button{
|
|
appearance:none;
|
|
padding:1vh;
|
|
width: auto;
|
|
/*background-image: radial-gradient(#59BEB3,#59BEB3,#59BEB3,#FFF8F0);*/
|
|
}
|
|
.previous, .next,.start{
|
|
margin-top: auto;
|
|
margin-bottom: 1rem;
|
|
font-size: 1.33rem;
|
|
height:2rem;
|
|
line-height: 1rem;
|
|
|
|
}
|
|
.previous{
|
|
/*position: absolute;
|
|
left:6.66rem;*/
|
|
background-color: none;
|
|
background: none;
|
|
border: none;
|
|
/*float:left;*/
|
|
/*margin-left: 1rem;*/
|
|
}
|
|
.previous a{
|
|
color:#59BEB3;
|
|
background-color: none;
|
|
}
|
|
|
|
.next, #start{
|
|
appearance:none;
|
|
background-color:#59BEB3;
|
|
border-color: #59BEB3;
|
|
border-radius:3vh;
|
|
padding:1vh;
|
|
box-shadow: none;
|
|
text-decoration-line: none;
|
|
font-weight: bold;
|
|
color:white;
|
|
/*float: right;*/
|
|
/*margin-right: 1rem;*/
|
|
}
|
|
#start{
|
|
width:20vh;
|
|
font-size: 3vh;
|
|
}
|
|
button a{
|
|
text-decoration-line: none;
|
|
font-weight: bold;
|
|
color:white;
|
|
}
|
|
|
|
button:active {
|
|
transform: translateY(.33rem);
|
|
}
|
|
}
|