EthikTag/assets/styles/front.scss

169 lines
3.0 KiB
SCSS

.info{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
visibility: hidden;
}
#step{
color: #007BFF;
padding: 20px;
font-size: 32px;
font-weight: 800;
}
#indication, #label{
border-radius: 50px;
background-color: #007BFF;
color: white;
padding: 8px 20px;
font-weight: 800;
font-size: 32px;
margin: 30px 0;
}
#evolution{
display: flex;
width: 100%;
justify-content: start;
align-items: center;
visibility: hidden;
input[type=range]{
width: 80%;
margin-left: 20px;
}
#label{
width: auto;
}
}
.displaySuccess{
position: absolute;
display: flex;
justify-content: center;
align-items: center;
font-size: 48px;
font-weight: 800;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: green;
color: white;
display: none;
z-index: 10000;
}
#picturePoche, #pictureTube{
display: flex;
justify-content: start;
align-items: start;
height: 300px;
.sang{
width: auto;
height: 150px;
}
img{
width: 100%;
height: 100%;
object-fit: contain;
}
}
.error{
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 300px;
width: 100%;
background-color: #F44336;
color: white;
display: none;
justify-content: center;
align-items: center;
font-size: 48px;
font-weight: 800;
}
#saisie{
position: absolute;
left:-300px
}
/*Badeau supérieur*/
.page_header {
display: grid;
grid-template-columns: 25% 0.75% 30% 44%;
grid-template-rows: 25vh;
grid-template-areas: "barecode sparebar identity gift_spec";
background-color: rgba(5, 5, 59, 0.952);
}
.gift_cb {
display: grid;
text-align: center;
grid-template-columns: 100%;
// grid-template-rows: 75% 25%;
grid-template-areas:
"cb"
"number_cb";
grid-area: barecode;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
margin: 10px;
background-color: white;
}
/*
.separator {
grid-area: sparebar;
background-color: black;
}*/
li {
list-style: none;
font-size: large;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
margin: 10px;
}
.page_header .gift_cb .cb_cb {
grid-template-columns: cb;
/*background-color: black;*/
}
.cb_number {
}
.identity {
grid-area: identity;
background-color: white;
margin: 10px;
}
.gift_specificity {
grid-area: gift_spec;
background-color: white;
margin: 10px;
}
/* Bandeau intermédiaire étapes*/
.step {
display: grid;
grid-template-columns: 100%;
grid-template-rows: 15vh 10vh;
grid-template-areas:
"step_number"
"step_message";
background-color: rgba(5, 5, 59, 0.952);
}
.step_state {
grid-area: step_number;
background-color: white;
margin-left: 10px;
margin-right: 10px;
}