nathan.boileau
/
Scripted
0
3
Fork 0
Code Issues 9 Pull Requests Packages Projects 1 Releases Wiki Activity

test
continuous-integration/drone/push Build is passing Details

Browse Source
ServeurDeTest
nathan boileau 2 years ago
parent e79fb7fb95
commit 2fb291ea8d
1 changed files with 0 additions and 391 deletions
Show Stats Download Patch File Download Diff File

391
WEB/View/src/CSS/Main.css
Unescape View File

@ -1,391 +0,0 @@
/*Fonts CSS */
@font-face {
font-family: Fauna;
src: url("../../assets/fonts/Fauna.ttf");
}
@font-face {
font-family: Equinox;
src: url("../../assets/fonts/Equinox.otf");
}
/* End Fonts CSS */
body {
min-height: 100vh;
font-family: "Equinox", sans-serif;
color: white;
height: 100vh;
background-image: url("../../assets/img/BackgroundForMain.png");
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-color: #000;
}
#imgMain {
background-image: url("../../assets/img/BackgroundForMain2.png");
background-position: bottom center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 70%;
height: 80%;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border: 1px solid #fff;
}
.neonBg {
background-color: #511949;
opacity: 0.9;
background-size: 10px 10px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
}
button:focus {
outline: none;
}
#imgProfil {
width: 30%;
height: 100%;
}
@media screen and (max-width: 1100px) {
#imgProfil {
display: none;
}
}
#profil {
position: fixed;
top: 0;
left: 0;
opacity: 0;
height: 100%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
#profil.open {
opacity: 1;
display: flex;
transition: all 0.6s;
-webkit-transition: all 0.6s;
-moz-transition: all 0.6s;
-ms-transition: all 0.6s;
-o-transition: all 0.6s;
}
#profilIcon {
font-size: 40px;
color: white;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transition: transform 0.8s;
-webkit-transition: transform 0.8s;
-moz-transition: transform 0.8s;
-ms-transition: transform 0.8s;
-o-transition: transform 0.8s;
}
#profilIcon.open {
transition: transform 0.8s;
-webkit-transition: transform 0.8s;
-moz-transition: transform 0.8s;
-ms-transition: transform 0.8s;
-o-transition: transform 0.8s;
background: none;
transform: rotate(180deg) !important;
-webkit-transform: rotate(180deg) !important;
-moz-transform: rotate(180deg) !important;
-ms-transform: rotate(180deg) !important;
-o-transform: rotate(180deg) !important;
}
#profilContainer.open {
justify-content: end;
}
#mainPart{
transition: all 0.8s;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-ms-transition: all 0.8s;
-o-transition: all 0.8s;
}
#mainPart.open {
margin-left: 50% !important;
}
/* Button Login/ Logout animation */
a {
position: relative;
display: inline-block;
cursor: pointer;
outline: none;
border: 0;
text-decoration: none;
background: transparent;
padding: 0;
font-size: inherit;
font-family: inherit;
}
a.logButton {
width: 12rem;
height: 50px;
}
a.logButton .circle {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
display: block;
margin: 0;
width: 3rem;
height: 3rem;
background: #fff;
border-radius: 1.625rem;
}
a.logButton .circle .icon {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: absolute;
top: 0;
bottom: 0;
margin: auto;
background: #050e15;
}
a.logButton .circle .icon.arrow {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
left: 0.625rem;
width: 1.125rem;
height: 0.125rem;
background: none;
}
a.logButton .circle .icon.arrow::before {
position: absolute;
content: "";
top: -0.25rem;
right: 0.0625rem;
width: 0.625rem;
height: 0.625rem;
border-top: 0.125rem solid #050e15;
border-right: 0.125rem solid #050e15;
transform: rotate(45deg);
}
a.logButton .button-text {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 0.75rem 0;
margin: 0 0 0 1.85rem;
color: #fff;
font-weight: 700;
line-height: 1.6;
text-align: center;
text-transform: uppercase;
}
a:hover .circle {
width: 100%;
}
a:hover .circle .icon.arrow {
background: #050e15;
transform: translate(1rem, 0);
}
a:hover .button-text {
color: #050e15;
}
/* Button style for code */
a,
button {
text-decoration: none !important;
outline: none !important;
}
.cssbuttons-io {
position: relative;
font-family: inherit;
font-weight: bolder;
font-size: 18px;
letter-spacing: 0.05em;
border-radius: 0.8em;
border: none;
color: white; /* text color */
overflow: hidden;
width: 65%;
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
#btn-1 {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='300' height='75' preserveAspectRatio='none' viewBox='0 0 300 75'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1065%26quot%3b)' fill='none'%3e%3crect width='300' height='75' x='0' y='0' fill='rgba(15%2c 17%2c 21%2c 1)'%3e%3c/rect%3e%3cpath d='M88.58 44.57 a12.5 12.5 0 1 0 25 0 a12.5 12.5 0 1 0 -25 0z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M304.7324658513289 67.92373703388498L289.9393763882664 65.58074183860701 287.5963811929884 80.37383130166957 302.38947065605095 82.71682649694753z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M272.6717239241291 45.44517070202609L265.44747696055765 34.734784126938415 252.99402057971187 50.92634785983939z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M139.86852403993186 17.277208590099413L152.36680844893687-0.5721913763171713 134.5174084825203-13.070475785322195 122.01912407351527 4.778924181094389z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M69.31 2.7 a23.05 23.05 0 1 0 46.1 0 a23.05 23.05 0 1 0 -46.1 0z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M200.644556359526 77.73750637644713L210.09013424424927 69.23266984831206 192.61009050968502 59.31672128529469z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M188.74 65.78 a22.37 22.37 0 1 0 44.74 0 a22.37 22.37 0 1 0 -44.74 0z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M50.67333971689776 18.34335935719956L34.189822854481996 24.670788651580793 40.51725214886323 41.154305513996555 57.00076901127899 34.82687621961532z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M236.50761656073053 43.80085479326328L215.11114470239534 38.46611519693424 209.77640510606628 59.862587055269444 231.1728769644015 65.19732665159847z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M36.69630717595443 33.954886934991144L51.286547918089674 23.354456541993386 40.686117525091916 8.764215799858142 26.095876782956672 19.3646461928559z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M277.96 6.68 a17.57 17.57 0 1 0 35.14 0 a17.57 17.57 0 1 0 -35.14 0z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M48.13 71.94 a14.2 14.2 0 1 0 28.4 0 a14.2 14.2 0 1 0 -28.4 0z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M227.81 38.26 a16.2 16.2 0 1 0 32.4 0 a16.2 16.2 0 1 0 -32.4 0z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float3'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1065'%3e%3crect width='300' height='75' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-10px%2c 0)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-5px%2c -5px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(0%2c -10px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e");
color: black;
}
#btn-1::before {
background: white;
}
#btn-1:hover {
color: white;
}
#btn-2 {
background-image: url(../../assets/svg/Polygon\ Luminary.svg);
}
.cssbuttons-io:hover {
color: white; /* Text color hover */
}
.cssbuttons-io svg {
width: 1.5em;
height: 1.5em;
margin-right: 0.8em;
}
.cssbuttons-io span {
position: relative;
z-index: 10;
display: inline-flex;
align-items: center;
padding: 0.8em 1.2em 0.8em 1.05em;
transition: color 0.6s;
-webkit-transition: color 0.6s;
-moz-transition: color 0.6s;
-ms-transition: color 0.6s;
-o-transition: color 0.6s;
}
.cssbuttons-io::before,
.cssbuttons-io::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.cssbuttons-io::before {
content: "";
background: rgb(20, 18, 33); /* Background color */
width: 120%;
left: -10%;
transform: skew(30deg);
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
-ms-transform: skew(30deg);
-o-transform: skew(30deg);
transition: transform 0.6s cubic-bezier(0.3, 1, 0.8, 1);
-webkit-transition: transform 0.6s cubic-bezier(0.3, 1, 0.8, 1);
-moz-transition: transform 0.6s cubic-bezier(0.3, 1, 0.8, 1);
-ms-transition: transform 0.6s cubic-bezier(0.3, 1, 0.8, 1);
-o-transition: transform 0.6s cubic-bezier(0.3, 1, 0.8, 1);
}
.cssbuttons-io:hover::before {
transform: translate3d(100%, 0, 0);
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
}
.cssbuttons-io:active {
transform: scale(0.95);
-webkit-transform: scale(0.95);
-moz-transform: scale(0.95);
-ms-transform: scale(0.95);
-o-transform: scale(0.95);
}
/* Button admin */
#btn {
width: 150px;
height: 50px;
border-radius: 5px;
border: none;
transition: all 0.5s ease-in-out;
font-size: 20px;
font-weight: 600;
display: flex;
align-items: center;
background: #040f16;
color: #f5f5f5;
}
#btn:hover {
box-shadow: 0 0 20px 0px #2e2e2e3a;
}
#btn #icon {
position: absolute;
height: 25px;
width: 25px;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
}
#btn #text {
transform: translateX(40px);
-webkit-transform: translateX(40px);
-moz-transform: translateX(40px);
-ms-transform: translateX(40px);
-o-transform: translateX(40px);
}
#btn:hover #icon {
width: 130px;
}
#btn:hover #text {
transition: all 0.5s;
opacity: 0;
}
#btn:focus {
outline: none;
}
#btn:active #icon {
transform: scale(0.85);
}
Write Preview
Loading…
Cancel
Save