Commit b4e4bc67 authored by Arnaud Bey's avatar Arnaud Bey
Browse files

fix play view (objectives)

parent c9d2ec0b
.top-container{
background-image: url(../img/logo.png);
background-repeat: no-repeat;
background-size: auto 45px;
padding-top: 8px solid transparent;
background-clip: border-box;
background-position: 0 -5px;
.top-container {
background-image: url(../img/logo.png);
background-repeat: no-repeat;
background-size: auto 45px;
padding-top: 8px solid transparent;
background-clip: border-box;
background-position: 0 -5px;
}
#combos-container, #findwords-container, #points-container{
margin-right:2%;
overflow:hidden;
#combos-container, #findwords-container, #points-container {
margin-right: 2%;
overflow: hidden;
}
#points-container{
float:left;
width:11%;
background-color:white;
height:40px;
display: flex;
text-align:center;
#objectives {
height: 100px;
}
#points{
margin:auto;
font-family: 'bloggersans', Arial, sans-serif;
#points-container {
float: left;
width: 11%;
background-color: white;
height: 40px;
display: flex;
text-align: center;
}
#woot{
margin:auto;
font-family: 'bloggersans', Arial, sans-serif;
#points {
margin: auto;
font-family: 'bloggersans', Arial, sans-serif;
}
#woot {
margin: auto;
font-family: 'bloggersans', Arial, sans-serif;
}
#woot sup {
font-size:50%;
font-size: 50%;
}
#woot-container {
width:87%;
display: flex;
text-align:center;
background-color:white;
height:40px;
margin-bottom:2%;
width: 87%;
display: flex;
text-align: center;
background-color: white;
height: 40px;
margin-bottom: 2%;
}
/*******
OBJECTIVES
********/
.objective-list, .objective-summary {
margin: auto;
margin: auto;
}
.objectives.active{
width:74%;
.objectives.active {
width: 74%;
}
.objectives.disabled {
background-color:lightgrey;
background-color: lightgrey;
}
.objectives.active .objective-summary{
display:none;
height: 100%;
.objectives.active .objective-summary {
display: none;
height: 100%;
}
.objectives .objective-list{
display:none;
height: 100%;
.objectives .objective-list {
display: none;
height: 100%;
}
.objectives.active .objective-list{
display:block;
.objectives.active .objective-list {
display: block;
}
.objective-findword {
height:50%;
width:100%;
display:block;
height: 50%;
width: 100%;
display: block;
}
.objectives{
display: flex;
text-align:center;
float:left;
width:11%;
height:100%;
cursor: pointer;
cursor: hand;
background-color:white;
color:black;
.objectives {
display: flex;
text-align: center;
float: left;
width: 11%;
height: 100%;
cursor: pointer;
background-color: white;
color: black;
}
.objective{
border-bottom:lightgrey 1px dotted;
.objective {
border-bottom: lightgrey 1px dotted;
}
#inflections-found {
font-family: 'bloggersans', Arial, sans-serif;
display:block;
width: 100%;
height:100px;
border-radius:3px;
margin-bottom:2%;
background-color:white;
overflow:hidden;
-webkit-column-count:3;
-moz-column-count:3;
-ms-column-count:3;
-o-column-count:3;
column-count:3;
-webkit-column-gap:15px;
-moz-column-gap:15px;
-ms-column-gap:15px;
-o-column-gap:15px;
column-gap:15px;
columns:3;
-moz-column-fill: auto;
-webkit-column-fill: auto;
column-fill: auto;
font-family: 'bloggersans', Arial, sans-serif;
display: block;
width: 100%;
height: 100px;
border-radius: 3px;
margin-bottom: 2%;
background-color: white;
overflow: hidden;
-webkit-column-count: 3;
-moz-column-count: 3;
-ms-column-count: 3;
-o-column-count: 3;
column-count: 3;
-webkit-column-gap: 15px;
-moz-column-gap: 15px;
-ms-column-gap: 15px;
-o-column-gap: 15px;
column-gap: 15px;
columns: 3;
-moz-column-fill: auto;
-webkit-column-fill: auto;
column-fill: auto;
}
.found-word:nth-child(-n+9) {
color:lightgrey;
color: lightgrey;
}
.found-word:nth-child(-n+6) {
color:grey;
color: grey;
}
.found-word:nth-child(-n+3) {
color:black;
color: black;
}
.found-word {
height:33%;
text-align:center;
display: flex;
align-items: center;
justify-content: center ;
height: 33%;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
/*******
COMBO
*******/
#current-combo-container {
float:left;
width:100%;
height:18px;
margin-bottom:4%;
float: left;
width: 100%;
height: 18px;
margin-bottom: 4%;
}
.current-combo {
background-color:white;
height:18px;
width:15.8%;
float: left;
transition:background-color 0.15s;
-webkit-transition:background-color 0.15s;
.current-combo {
background-color: white;
height: 18px;
width: 15.8%;
float: left;
transition: background-color 0.15s;
-webkit-transition: background-color 0.15s;
}
#current-combo-1, #current-combo-2, #current-combo-3, #current-combo-4, #current-combo-5 {
margin-right:1%;
margin-right: 1%;
}
.locked {
background-color:lightgrey;
background-color: lightgrey;
}
.reached-1, .reached-2 {
color:#F7941D;
color: #F7941D;
}
.reached-3, .reached-4 {
color:#F37022;
color: #F37022;
}
.reached-5, .reached-6,
.reached-7, .reached-8,
.reached-9, .reached-10
.reached-11, .reached-12 {
color: #F04124;
.reached-9, .reached-10 .reached-11, .reached-12 {
color: #F04124;
}
#current-combo-1.reached, #current-combo-2.reached {
background-color:#F7941D;
background-color: #F7941D;
}
#current-combo-3.reached, #current-combo-4.reached {
background-color:#F37022;
background-color: #F37022;
}
#current-combo-5.reached, #current-combo-6.reached{
background-color:#F04124;
#current-combo-5.reached, #current-combo-6.reached {
background-color: #F04124;
}
ul#inflections-found {
max-height:500px;
overflow-y:auto;
max-height: 500px;
overflow-y: auto;
}
ul#squares {
list-style-type: none;
list-style-position: inside;
-moz-user-select: -moz-none;
-webkit-user-select: none;
-khtml-user-select: none;
-o-user-select: none;
user-select: none;
-ms-user-select:none;
width:100%;
height:100%;
display:block;
padding:0;
list-style-type: none;
list-style-position: inside;
-moz-user-select: -moz-none;
-webkit-user-select: none;
-khtml-user-select: none;
-o-user-select: none;
user-select: none;
-ms-user-select: none;
width: 100%;
height: 100%;
display: block;
padding: 0;
}
ul#squares li {
touch-action: none;
font-family: 'bloggersans', Arial, sans-serif;
height:25%;
width:25%;
border-radius:20%;
background-color: #213F2F;
float: left;
text-align: center;
border: 4px solid transparent;
background-clip: padding-box;
display:flex;
touch-action: none;
font-family: 'bloggersans', Arial, sans-serif;
height: 25%;
width: 25%;
border-radius: 20%;
background-color: #213F2F;
float: left;
text-align: center;
border: 4px solid transparent;
background-clip: padding-box;
display: flex;
}
ul#squares li p {
margin:auto;
cursor: pointer;
color: white;
font-size: 3em;
text-align: center;
border-radius:25%;
margin: auto;
cursor: pointer;
color: white;
font-size: 3em;
text-align: center;
border-radius: 25%;
}
ul#squares li p.read-write {
color:black;
font-size: 2em;
color: black;
font-size: 2em;
}
ul#squares li p input {
width:100%;
width: 100%;
}
ul#squares li p span {
position:absolute;
bottom:3%;
right:13%;
font-size: 0.3em;
position: absolute;
bottom: 3%;
right: 13%;
font-size: 0.3em;
}
ul#squares li.selected {
background-color: white;
background-color: white;
}
ul#squares li.selected p {
color: black;
color: black;
}
ul#squares li.wrongWord {
background-color: red;
background-color: red;
}
.right-form, .wrong-form {
font-size:2.5em;
font-size: 2.5em;
}
.wrong-form {
-moz-text-decoration-line: line-through;
-webkit-text-decoration-line:line-through;
text-decoration-line: line-through;
-moz-text-decoration-line: line-through;
-webkit-text-decoration-line: line-through;
text-decoration-line: line-through;
}
.alreadyfound-form {
color: lightgrey;
color: lightgrey;
}
#game-container {
max-width: 480px;
margin:auto;
max-width: 480px;
margin: auto;
}
#fullscreen {
cursor:pointer;
position: fixed;
height:25px;
width:25px;
top:10px;
left:10px;
cursor: pointer;
position: fixed;
height: 25px;
width: 25px;
top: 10px;
left: 10px;
}
#giveup{
cursor:pointer;
height:40px;
background-color:white;
margin-bottom:2%;
margin-right:2%;
padding:0 10px;
display:flex;
#giveup {
cursor: pointer;
height: 40px;
background-color: white;
margin-bottom: 2%;
margin-right: 2%;
padding: 0 10px;
display: flex;
}
#giveup i {
margin:auto;
margin: auto;
}
#clock-wrapper{
height:40px;
background-color:white;
margin-bottom:2%;
padding:0 10px;
display:flex;
#clock-wrapper {
height: 40px;
background-color: white;
margin-bottom: 2%;
padding: 0 10px;
display: flex;
}
#clock-wrapper > #clock{
margin:auto;
#clock-wrapper>#clock {
margin: auto;
}
.flip-clock-before, .flip-clock-wrapper ul li a div div.shadow, .flip-clock-label {
display:none;
display: none;
}
.flip-clock-wrapper ul li, .flip-clock-wrapper ul li a{
width:10px !important;
.flip-clock-wrapper ul li, .flip-clock-wrapper ul li a {
width: 10px !important;
}
.flip-clock-wrapper ul li a div div.inn {
font-family: 'bloggersans', Arial, sans-serif;
font-size:15px;
text-shadow:none;
width:50%;
color:black;
background-color:white;
border-radius:0;
font-family: 'bloggersans', Arial, sans-serif;
font-size: 15px;
text-shadow: none;
width: 50%;
color: black;
background-color: white;
border-radius: 0;
}
.flip-clock-wrapper .flip {
box-shadow:none;
width:10px !important;
padding-left:2px;
box-shadow: none;
width: 10px !important;
padding-left: 2px;
}
.flip-clock-wrapper ul li {line-height: 25px;}
.flip-clock-wrapper ul {
width:10px !important;
height: 20px;
margin: 0 2px;
background-color:white;
border-radius: none;
font-weight: normal;
.flip-clock-wrapper ul li {
line-height: 25px;
}
.flip-clock-wrapper ul li a div{
outline:none;
width:10px !important;
.flip-clock-wrapper ul {
width: 10px !important;
height: 20px;
margin: 0 2px;
background-color: white;
border-radius: none;
font-weight: normal;
}
.flip-clock-wrapper ul li a div {
outline: none;
width: 10px !important;
}
.flip-clock-wrapper ul.play li.flip-clock-active {
-webkit-animation: none;
-moz-animation: none;
animation: none;
width:10px !important;
-webkit-animation: none;
-moz-animation: none;
animation: none;
width: 10px !important;
}
.flip-clock-wrapper ul.play li.flip-clock-active .down {
-webkit-animation:none;
-moz-animation:none;
animation:none;
-webkit-animation: none;