CyberGammaGroup-websites-css/main-site.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;
    &::after{
        content:"";
        background-color:scale-color($pricolor,$lightness:-50%);
        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::after{
        width:100%;
        height:100%;
    }
}
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%;
}

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;
}

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;
    filter: brightness(80%);
}

.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 {
    filter: brightness(80%);
}

.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.compforfait 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.compforfait thead .buy:hover {
    filter: brightness(80%);
}

.forfaits .forfait .buy.contact,
table.compforfait 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.compforfait {
    z-index: 0;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0px;
    text-align: center;
}

table.compforfait td,
tr {
    border: 1px solid black;
}

table.compforfait thead {
    z-index: 0;
    position: sticky;
    top: 50px;
    background: rgb(234, 234, 234);
}

table.compforfait thead tr:not(:first-child) td {
    border-top: none;
}

table.compforfait thead tr:not(:last-child) td {
    border-bottom: none;
}

table.compforfait tbody tr td:not(:first-child) {
    font-family: IcoMoon-Free;
}