473 lines
9.2 KiB
SCSS
473 lines
9.2 KiB
SCSS
$pricolor:rgb(150 255 161);
|
|
$bgcolor:#272727;
|
|
$textcolor:lime;
|
|
$seccolor:scale-color($bgcolor,$lightness:-30%);
|
|
$seccolordarklight: scale-color($seccolor,$lightness:-30%);
|
|
$errorbg: rgb(150 50 50);
|
|
$errorcolor: rgb(255, 220, 220);
|
|
$eventbg: rgb(255, 255, 255);
|
|
$seccolorlight: scale-color($seccolor,$lightness:60%);
|
|
$dangercolor1: #c40014;
|
|
$dangercolor2: #e86500;
|
|
$dangercolortext: #fff;
|
|
$dangercolortextoutline: rgb(250, 200, 200);
|
|
$confirmationcolor: rgb(100, 200, 100);
|
|
$confirmationcolortext: rgb(220, 255, 220);
|
|
|
|
|
|
* {
|
|
z-index: 0;
|
|
}
|
|
a{
|
|
color:$textcolor;
|
|
position:relative;
|
|
&::before{
|
|
z-index: -1;
|
|
content:"";
|
|
background-color:scale-color($pricolor,$lightness:-80%);
|
|
display:block;
|
|
width:0px;
|
|
height:0px;
|
|
position:absolute;
|
|
transition:all .5s ease;
|
|
top:50%;
|
|
left:50%;
|
|
transform:translate(-50%, -50%);
|
|
border:0px solid transparent;
|
|
border-radius: 5px;
|
|
}
|
|
&:hover::before{
|
|
width:100%;
|
|
height:100%;
|
|
}
|
|
}
|
|
h1{
|
|
font-weight: 600;
|
|
text-align: center;
|
|
text-decoration: underline;
|
|
font-size: 200%;
|
|
}
|
|
body {
|
|
background-color: $bgcolor;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
width: 100%;
|
|
margin: 0px;
|
|
}
|
|
|
|
main.content {
|
|
margin: 0px 10px;
|
|
background-color: $bgcolor;
|
|
color: $textcolor;
|
|
flex: 2 0 0%;
|
|
}
|
|
:target {
|
|
border-radius: 3px;
|
|
animation: highlight 1000ms 3 ease-out;
|
|
}
|
|
|
|
@keyframes highlight {
|
|
0% {
|
|
background-color: $confirmationcolor;
|
|
}
|
|
|
|
100% {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
main.content .admindiv {
|
|
width: 80%;
|
|
background-image: linear-gradient(20deg, $dangercolor1 25%, $dangercolor2 25%, $dangercolor2 50%, $dangercolor1 50%, $dangercolor1 75%, $dangercolor2 75%, $dangercolor2 100%);
|
|
background-size: 116.95px 42.57px;
|
|
position: relative;
|
|
left: 50%;
|
|
transform: translate(-50%, 0px);
|
|
text-align: center;
|
|
z-index: 0;
|
|
place-self: center;
|
|
border-radius: 20px;
|
|
padding: 20px;
|
|
color: $dangercolortext;
|
|
}
|
|
|
|
main.content .admindiv * {
|
|
color: $dangercolortext;
|
|
font-weight: 900;
|
|
-webkit-text-fill-color: $dangercolortext;
|
|
-webkit-text-stroke-width: 0.5px;
|
|
-webkit-text-stroke-color: $dangercolortextoutline;
|
|
}
|
|
|
|
header.header {
|
|
height: 50px;
|
|
background-color: $seccolor;
|
|
color: $pricolor;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
border-radius: 0px 0px 10px 10px;
|
|
position: sticky;
|
|
top: 0px;
|
|
z-index: 50 !important;
|
|
}
|
|
|
|
header.header a.logo {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
height: 50px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
&::before{
|
|
display: none!important;
|
|
}
|
|
}
|
|
|
|
header.header a.logo img {
|
|
margin: 0px;
|
|
border-radius: 100%;
|
|
height: 45px !important;
|
|
}
|
|
|
|
header.header a.logo:hover {
|
|
filter: brightness(80%);
|
|
}
|
|
|
|
header.header ul.nav {
|
|
transition: all 2s ease 0s;
|
|
position: absolute;
|
|
right: 15px;
|
|
list-style: none;
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
z-index: 50 !important;
|
|
}
|
|
|
|
header.header ul.nav li.nav-item {
|
|
padding: 0px;
|
|
height: 50px;
|
|
margin: 5px 0px;
|
|
}
|
|
|
|
header.header ul.nav li.nav-item a {
|
|
background-color: $seccolor;
|
|
display: inline-block;
|
|
padding: 0px 20px;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
color: $pricolor;
|
|
text-decoration: none;
|
|
}
|
|
|
|
header.header ul.nav li.nav-item.active a {
|
|
background-color: $seccolordarklight;
|
|
}
|
|
|
|
header.header ul.nav li.nav-item a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.toggler-label,
|
|
.toggler {
|
|
display: none;
|
|
}
|
|
|
|
header.header .toggler-label svg {
|
|
height: 45px !important;
|
|
width: 45px !important;
|
|
}
|
|
|
|
header.header .toggler-label svg path {
|
|
fill: $pricolor;
|
|
}
|
|
|
|
.toggler~header.header .toggler-label {
|
|
transition: all 0.3s ease-in-out 0s;
|
|
}
|
|
|
|
.toggler:checked~header.header .toggler-label {
|
|
transform: rotate(-180deg);
|
|
}
|
|
|
|
@media (max-width: 860px) {
|
|
header.header ul.nav {
|
|
overflow: hidden;
|
|
height: 0px;
|
|
position: fixed;
|
|
top: 50px;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
width: 100%;
|
|
left: 0px;
|
|
right: 0px;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
background: $pricolor;
|
|
flex-flow: column wrap;
|
|
transition: all 0.5s ease 0s;
|
|
z-index: 50 !important;
|
|
}
|
|
|
|
header.header ul.nav * {
|
|
transition: all 2s ease 0s;
|
|
opacity: 0;
|
|
}
|
|
|
|
header.header .toggler-label {
|
|
position: absolute;
|
|
display: block;
|
|
right: 15px;
|
|
height: 50px;
|
|
width: 50px;
|
|
}
|
|
|
|
.toggler:checked~header.header ul.nav {
|
|
overflow: auto;
|
|
padding-top: 20px;
|
|
padding-bottom: 20px;
|
|
height: calc(100% - 90px) !important;
|
|
}
|
|
|
|
.toggler:checked~header.header ul.nav * {
|
|
opacity: 100;
|
|
}
|
|
|
|
.toggler:checked~header.header ul.nav li.nav-item {
|
|
min-width: calc(50% - 2px);
|
|
border-left: 1px solid $pricolor;
|
|
border-right: solid 1px $pricolor;
|
|
}
|
|
|
|
.toggler:checked~header.header ul.nav li.nav-item a {
|
|
width: 100%;
|
|
padding: 0px;
|
|
}
|
|
|
|
.toggler:checked~header.header {
|
|
position: fixed;
|
|
width: 100%;
|
|
top: 0px;
|
|
z-index: 50 !important;
|
|
height: 50px !important;
|
|
}
|
|
}
|
|
|
|
footer.footer {
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: $seccolor;
|
|
color: $pricolor;
|
|
}
|
|
|
|
footer.footer a {
|
|
color: $pricolor;
|
|
}
|
|
|
|
footer.footer a:hover {
|
|
}
|
|
|
|
.eventslist {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.eventitem {
|
|
display: flex;
|
|
margin: 10px 0px;
|
|
flex-direction: row;
|
|
width: 80%;
|
|
background-color: $eventbg;
|
|
padding: 10px;
|
|
border-radius: 20px;
|
|
height: 300px;
|
|
}
|
|
|
|
.eventitem .image {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.eventitem .image img {
|
|
max-width: 200px !important;
|
|
width: 30vw !important;
|
|
}
|
|
|
|
.eventitem .eventinfos {
|
|
flex: 2 0 0%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.eventitem .eventinfos .title {
|
|
font-weight: 900;
|
|
font-size: 150%;
|
|
text-align: center;
|
|
text-decoration: underline;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.eventitem .eventinfos time.date {
|
|
place-self: center;
|
|
background-color: $seccolorlight;
|
|
text-align: center;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.eventitem .eventinfos .desc {
|
|
padding: 5px;
|
|
flex: 2 0 0%;
|
|
max-height: 200px;
|
|
overflow: auto;
|
|
border: 2px solid $seccolor;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.cusfont {
|
|
font-family: IcoMoon-Free;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: IcoMoon-Free;
|
|
src: url("./IcoMoon-Free.ttf") format("truetype");
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
.check {
|
|
color: green;
|
|
}
|
|
|
|
.cross {
|
|
color: red;
|
|
}
|
|
|
|
.forfaits {
|
|
z-index: 0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
background-color: rgb(54, 81, 90);
|
|
border-radius: 10px;
|
|
padding: 10px 0px;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
.forfaits div.forfait {
|
|
z-index: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: 2px 10px;
|
|
border-radius: 10px;
|
|
background: rgb(100, 113, 131);
|
|
padding: 5px;
|
|
place-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.forfaits .forfait .name {
|
|
font-size: xx-large;
|
|
}
|
|
|
|
.forfaits .forfait .price {
|
|
color: rgb(249, 249, 249);
|
|
font-weight: 600;
|
|
font-size: 200%;
|
|
}
|
|
|
|
.forfaits .forfait .price::after {
|
|
content: "\a /heure de travail";
|
|
font-size: 50%;
|
|
font-weight: 100;
|
|
white-space: pre;
|
|
}
|
|
|
|
.forfaits .forfait .buy,
|
|
table.listforfait thead .buy {
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
background-color: rgb(90, 230, 150);
|
|
cursor: pointer;
|
|
border: 0px solid;
|
|
transition: all 0.5s ease-in 0s;
|
|
}
|
|
|
|
.forfaits .forfait .buy:hover,
|
|
table.listforfait thead .buy:hover {
|
|
}
|
|
|
|
.forfaits .forfait .buy.contact,
|
|
table.listforfait thead .buy.contact {
|
|
background-color: rgb(90, 150, 230);
|
|
}
|
|
|
|
.forfaits .forfait::before {
|
|
border-bottom-right-radius: 30%;
|
|
padding: 2px;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.forfaits .forfait.recommended::before {
|
|
background: rgb(165, 197, 255);
|
|
content: "Recommandé";
|
|
}
|
|
|
|
.forfaits .forfait.cheapest::before {
|
|
background: rgb(160, 255, 182);
|
|
content: "Le moins cher";
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.forfaits {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
table.listforfait {
|
|
z-index: 0;
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
width: 100%;
|
|
border-collapse: separate;
|
|
border-spacing: 0px;
|
|
text-align: center;
|
|
}
|
|
|
|
table.listforfait td,
|
|
tr {
|
|
border: 1px solid black;
|
|
}
|
|
|
|
table.listforfait thead {
|
|
z-index: 0;
|
|
position: sticky;
|
|
top: 50px;
|
|
background: $seccolordarklight;
|
|
}
|
|
|
|
table.listforfait thead tr:not(:first-child) td {
|
|
border-top: none;
|
|
}
|
|
|
|
table.listforfait thead tr:not(:last-child) td {
|
|
border-bottom: none;
|
|
}
|