Vous avez reçu un message "Your GitLab account has been locked ..." ? Pas d'inquiétude : lisez cet article https://docs.gricad-pages.univ-grenoble-alpes.fr/help/unlock/

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

fix play view (objectives)

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