generated from Templates_CodeFirst/templateHtmlCss
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
895 lines
18 KiB
895 lines
18 KiB
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
:root {
|
|
--Primary: #581845;
|
|
--Secondary: #900C3F;
|
|
--Tertiary: #C70039;
|
|
--Quaternary: #250F1E;
|
|
/**BG**/
|
|
--BackgroundLight: #f4f4f4;
|
|
--TextLight: #333;
|
|
|
|
--BackgroundDark: #1e1e1e;
|
|
--TextDark: #f4f4f4;
|
|
|
|
/* Project card colors */
|
|
--CardLightBg: #f5f5f5;
|
|
--CardDarkBg: #333;
|
|
|
|
--CardLightText: #000;
|
|
--CardDarkText: #fff;
|
|
|
|
--CardShadowIn: #bebebe;
|
|
--CardShadowOut: #ffffff;
|
|
|
|
--CardDarkShadowIn: #555;
|
|
--CardDarkShadowOut: #111;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Roboto', sans-serif;
|
|
line-height: 1.6;
|
|
background-color: #f4f4f4;
|
|
color: #333;
|
|
}
|
|
body.dark-mode {
|
|
background-color: var(--BackgroundDark);
|
|
color: var(--TextDark);
|
|
}
|
|
|
|
.accueil{
|
|
background-color: #b5d2fc
|
|
}
|
|
|
|
header {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100vh;
|
|
background: url('img/accueil.jpeg') no-repeat center center;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
color: white;
|
|
}
|
|
|
|
/* header.dark-mode {
|
|
background: url('img/accueil_dark.jpeg') no-repeat center center;
|
|
} */
|
|
|
|
.header-content {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
header::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
z-index: 1;
|
|
}
|
|
|
|
header nav ul {
|
|
list-style: none;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
header nav ul li {
|
|
margin: 0 15px;
|
|
}
|
|
|
|
header nav ul li a {
|
|
color: #fff;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/*Title*/
|
|
.nine h1 {
|
|
text-align:center; font-size:50px; text-transform:uppercase; color:#f2f2f2;
|
|
font-family:"Playfair Display", serif; font-weight:bold;
|
|
}
|
|
|
|
.nine h1 span {
|
|
margin-top: 5px;
|
|
font-size:15px; color:#f2f2f2; word-spacing:1px; font-weight:normal; letter-spacing:2px;
|
|
text-transform: uppercase; font-family:"Raleway", sans-serif; font-weight:500;
|
|
|
|
display: grid;
|
|
grid-template-columns: 1fr max-content 1fr;
|
|
grid-template-rows: 27px 5;
|
|
grid-gap: 20px;
|
|
align-items: center;
|
|
}
|
|
|
|
.nine h1 span:after,.nine h1 span:before {
|
|
content: " ";
|
|
display: block;
|
|
border-bottom: 1px solid #ccc;
|
|
border-top: 1px solid #ccc;
|
|
height: 5px;
|
|
background-color:#f8f8f8;
|
|
}
|
|
|
|
|
|
/* Add a black background color to the top navigation */
|
|
.topnav {
|
|
background-color: #333;
|
|
overflow: hidden;
|
|
position: sticky;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 1000;
|
|
}
|
|
|
|
/* Style the links inside the navigation bar */
|
|
.topnav a {
|
|
float: left;
|
|
color: #f2f2f2;
|
|
text-align: center;
|
|
padding: 14px 16px;
|
|
text-decoration: none;
|
|
font-size: 17px;
|
|
}
|
|
|
|
/* Change the color of links on hover */
|
|
.topnav a:hover {
|
|
background-color: #ddd;
|
|
color: black;
|
|
}
|
|
|
|
/* Add a color to the active/current link */
|
|
.topnav a.active {
|
|
background-color: #04AA6D;
|
|
color: white;
|
|
}
|
|
|
|
/** Switch Dark Mode*/
|
|
.toggle {
|
|
background-color: #1e1e1e;
|
|
width: 56px;
|
|
height: 56px;
|
|
border-radius: 50%;
|
|
display: grid;
|
|
place-items: center;
|
|
cursor: pointer;
|
|
box-shadow: 0 0 50px 20px rgba(0, 0, 0, .1);
|
|
line-height: 1;
|
|
}
|
|
|
|
.input {
|
|
display: none;
|
|
}
|
|
|
|
.icon {
|
|
grid-column: 1 / 1;
|
|
grid-row: 1 / 1;
|
|
transition: transform 500ms;
|
|
}
|
|
|
|
.icon--moon {
|
|
transition-delay: 200ms;
|
|
}
|
|
|
|
.icon--sun {
|
|
transform: scale(0);
|
|
}
|
|
|
|
#theme-toggle:checked + .icon--moon {
|
|
transform: rotate(360deg) scale(0);
|
|
}
|
|
|
|
#theme-toggle:checked ~ .icon--sun {
|
|
transition-delay: 200ms;
|
|
transform: scale(1) rotate(360deg);
|
|
}
|
|
/* .header-content {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
} */
|
|
|
|
.section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 60px 20px;
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
/** Text */
|
|
.mainTitle{
|
|
background-image: linear-gradient(to left, var(--Secondary), var(--Tertiary));
|
|
color: transparent;
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
font-size: 3rem;
|
|
font-weight: 700;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/** About me*/
|
|
|
|
.about-deck{
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 2.5em;
|
|
margin-top: 2.5em;
|
|
}
|
|
|
|
.about-card-container {
|
|
width: 300px;
|
|
height: 300px;
|
|
position: relative;
|
|
border-radius: 10px;
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.about-card {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: inherit;
|
|
}
|
|
|
|
.about-card .about-front-content {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1)
|
|
}
|
|
|
|
.about-card .about-front-content p {
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
opacity: 1;
|
|
/* background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% ); */
|
|
background: linear-gradient(-45deg, var(--Tertiary) 0%, var(--Primary) 100% );
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1)
|
|
}
|
|
|
|
.about-card .about-content {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
gap: 10px;
|
|
background: linear-gradient(-45deg, var(--Tertiary) 0%, var(--Primary) 100% );
|
|
color: #e8e8e8;
|
|
padding: 20px;
|
|
line-height: 1.5;
|
|
border-radius: 5px;
|
|
pointer-events: none;
|
|
transform: translateY(96%);
|
|
transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
|
|
}
|
|
|
|
.about-card .about-content .about-heading {
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.about-card:hover .about-content {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.about-card:hover .about-front-content {
|
|
transform: translateY(-30%);
|
|
}
|
|
|
|
.about-card:hover .about-front-content p {
|
|
opacity: 0;
|
|
}
|
|
|
|
/** Parcour */
|
|
|
|
#parcour{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 100vh;
|
|
padding: 100px 0;
|
|
/*font-family: Jost;*/
|
|
}
|
|
|
|
.timeline {
|
|
width: 80%;
|
|
height: auto;
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.timeline-content {
|
|
border-radius: 20px;
|
|
background: linear-gradient(#fefefe, #eeeeee) padding-box,
|
|
linear-gradient(var(--Tertiary), var(--Secondary)) border-box;
|
|
border: 2px solid transparent;
|
|
position: relative;
|
|
padding: 1.8rem;
|
|
transition: 0.5s ease-out;
|
|
overflow: visible;
|
|
}
|
|
|
|
body.dark-mode .timeline-content
|
|
{
|
|
background: linear-gradient(#2a2a2a, var(--BackgroundDark)) padding-box,
|
|
linear-gradient(var(--Tertiary), var(--Secondary)) border-box;
|
|
}
|
|
.timeline-component {
|
|
margin: 0px 20px 20px 20px;
|
|
}
|
|
|
|
@media screen and (min-width: 768px) { /* Trop petit écran => sans frise*/
|
|
.timeline {
|
|
display: grid;
|
|
grid-template-columns: 1fr 3px 1fr;
|
|
}
|
|
.timeline-middle {
|
|
position: relative;
|
|
background-image: linear-gradient(45deg, var(--Tertiary), var(--Secondary));
|
|
width: 3px;
|
|
height: 100%;
|
|
}
|
|
.main-middle {
|
|
opacity: 0;
|
|
}
|
|
.timeline-circle {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
width: 15px;
|
|
height: 15px;
|
|
border-radius: 50%;
|
|
background-image: linear-gradient(45deg, var(--Tertiary), var(--Secondary));
|
|
-webkit-transform: translateX(-50%);
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
|
|
/** Project Grid */
|
|
.projects-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 2.5em;
|
|
align-items: start;
|
|
}
|
|
|
|
.project-card {
|
|
width: 500px;
|
|
height: 254px;
|
|
|
|
border-radius: 50px;
|
|
background: var(--CardLightBg);
|
|
box-shadow: 18px 18px 0px var(--CardShadowIn),
|
|
-18px -18px 0px var(--CardShadowOut);
|
|
|
|
border-radius: 20px;
|
|
border: 2px solid var(--CardShadowIn);
|
|
position: relative;
|
|
padding: 1.8rem;
|
|
transition: 0.5s ease-out;
|
|
overflow: visible;
|
|
}
|
|
|
|
.project-card h3 {
|
|
color: var(--Secondary);
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
body.dark-mode .project-card {
|
|
background: var(--CardDarkBg);
|
|
color: var(--CardDarkText);
|
|
box-shadow: 18px 18px 0px var(--CardDarkShadowIn),
|
|
-18px -18px 0px var(--CardDarkShadowOut);
|
|
border: 2px solid var(--CardDarkShadowIn);
|
|
}
|
|
|
|
.text-title {
|
|
margin-top: 1em;
|
|
color: var(--Secondary);
|
|
font: bolder;
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
.project-card-button {
|
|
transform: translate(-50%, 125%);
|
|
width: 60%;
|
|
border-radius: 1rem;
|
|
border: none;
|
|
background-color: var(--Secondary);
|
|
color: #fff;
|
|
font-size: 1rem;
|
|
padding: .5rem 1rem;
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 0;
|
|
opacity: 0;
|
|
transition: 0.3s ease-out;
|
|
}
|
|
.project-card-details {
|
|
color: var(--CardLightText);
|
|
height: 100%;
|
|
gap: .5em;
|
|
display: grid;
|
|
place-content: center;
|
|
}
|
|
|
|
body.dark-mode .project-card-details {
|
|
color: var(--CardDarkText);
|
|
}
|
|
|
|
/*Hover*/
|
|
.project-card:hover {
|
|
border-color: var(--Secondary);
|
|
box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
body.dark-mode .project-card:hover {
|
|
border-color: var(--Secondary);
|
|
box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
.project-card:hover .project-card-button {
|
|
transform: translate(-50%, 50%);
|
|
opacity: 1;
|
|
}
|
|
|
|
|
|
.projects-grid .project-card:nth-child(2n+1):not(:first-child) {
|
|
grid-column: 1;
|
|
margin-bottom: -50px;
|
|
margin-top: -100px;
|
|
}
|
|
|
|
.projects-grid .project-card:nth-child(2n) {
|
|
grid-column: 2;
|
|
margin-top: 100px;
|
|
}
|
|
|
|
/** card style */
|
|
|
|
|
|
/** Alt Links*/
|
|
|
|
.AltLinks{
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 1.5em;
|
|
margin-top: 1em;
|
|
}
|
|
|
|
.Btn {
|
|
width: 45px;
|
|
height: 45px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: none;
|
|
background-color: transparent;
|
|
position: relative;
|
|
/* overflow: hidden; */
|
|
border-radius: 7px;
|
|
cursor: pointer;
|
|
transition: all .3s;
|
|
z-index: 2;
|
|
}
|
|
|
|
.imgContainer {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: transparent;
|
|
backdrop-filter: blur(1px);
|
|
letter-spacing: 0.8px;
|
|
border-radius: 10px;
|
|
transition: all .3s;
|
|
border: 1px solid rgba(156, 156, 156, 0.466);
|
|
}
|
|
|
|
.imgIcon {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
border-radius: 7px;
|
|
}
|
|
|
|
|
|
.BG {
|
|
position: absolute;
|
|
content: "";
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
background: var(--Secondary);
|
|
background: linear-gradient(to left, var(--Secondary), var(--Tertiary));
|
|
/* background: linear-gradient(-45deg, var(--Tertiary) 0%, var(--Secondary) 100% ); */
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
|
|
z-index: -1;
|
|
border-radius: 9px;
|
|
pointer-events: none;
|
|
transition: all .3s;
|
|
}
|
|
|
|
.Btn:hover .BG {
|
|
transform: rotate(35deg);
|
|
transform-origin: bottom;
|
|
}
|
|
|
|
.Btn:hover .imgContainer {
|
|
background-color: rgba(156, 156, 156, 0.466);
|
|
}
|
|
|
|
|
|
/** Form */
|
|
|
|
.form-container {
|
|
width: 60%;
|
|
background: linear-gradient(#fefefe, #eeeeee) padding-box,
|
|
linear-gradient(300deg, transparent 5%,var(--Tertiary), var(--Secondary)) border-box;
|
|
border: 2px solid transparent;
|
|
padding: 32px 24px;
|
|
font-size: 14px;
|
|
font-family: inherit;
|
|
color: white;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
box-sizing: border-box;
|
|
border-radius: 16px;
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
}
|
|
|
|
|
|
.form-container .form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
.form-container .form-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.form-container .form-group label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
color: var(--Quaternary);
|
|
font-weight: 600;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.form-container .form-group input {
|
|
width: 100%;
|
|
padding: 12px 16px;
|
|
border-radius: 8px;
|
|
color: var(--Quaternary);
|
|
font-family: inherit;
|
|
background-color: transparent;
|
|
border: 1px solid var(--Primary);
|
|
}
|
|
|
|
.form-container .form-group textarea {
|
|
width: 100%;
|
|
padding: 12px 16px;
|
|
border-radius: 8px;
|
|
resize: none;
|
|
color: var(--Quaternary);
|
|
height: 96px;
|
|
border: 1px solid var(--Primary);
|
|
background-color: transparent;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.form-container .form-group input::placeholder {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.form-container .form-group input:focus {
|
|
outline: none;
|
|
border-color: var(--Secondary);
|
|
}
|
|
|
|
.form-container .form-group textarea:focus {
|
|
outline: none;
|
|
border-color: var(--Secondary);
|
|
}
|
|
|
|
|
|
.send-msg {
|
|
width: 12rem;
|
|
height: auto;
|
|
position: relative;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
outline: none;
|
|
border: 0;
|
|
vertical-align: middle;
|
|
text-decoration: none;
|
|
background: transparent;
|
|
padding: 0;
|
|
font-size: inherit;
|
|
font-family: inherit;
|
|
}
|
|
|
|
button.send-msg .circle {
|
|
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
|
|
position: relative;
|
|
display: block;
|
|
margin: 0;
|
|
width: 3rem;
|
|
height: 3rem;
|
|
background: var(--Primary);
|
|
border-radius: 1.625rem;
|
|
}
|
|
|
|
button.send-msg .circle .icon {
|
|
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
background: #fff;
|
|
}
|
|
|
|
button.send-msg .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;
|
|
}
|
|
|
|
button.send-msg .circle .icon.arrow::before {
|
|
position: absolute;
|
|
content: "";
|
|
top: -0.29rem;
|
|
right: 0.0625rem;
|
|
width: 0.625rem;
|
|
height: 0.625rem;
|
|
border-top: 0.125rem solid #fff;
|
|
border-right: 0.125rem solid #fff;
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
button.send-msg .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: var(--Quaternary);
|
|
font-weight: 700;
|
|
line-height: 1.6;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
button:hover .circle {
|
|
width: 100%;
|
|
}
|
|
|
|
button:hover .circle .icon.arrow {
|
|
background: #fff;
|
|
transform: translate(1rem, 0);
|
|
}
|
|
|
|
button:hover .button-text {
|
|
color: #fff;
|
|
}
|
|
|
|
/** Inputs */
|
|
.form__group {
|
|
position: relative;
|
|
padding: 20px 0 0;
|
|
width: 100%;
|
|
max-width: 500px;
|
|
}
|
|
|
|
.form__field {
|
|
font-family: inherit;
|
|
width: 100%;
|
|
border: none;
|
|
border-bottom: 2px solid var(--Quaternary);
|
|
outline: 0;
|
|
font-size: 17px;
|
|
color: var(--Quaternary);
|
|
padding: 7px 0;
|
|
background: transparent;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
.form__field::placeholder {
|
|
color: transparent;
|
|
}
|
|
|
|
.form__field:placeholder-shown ~ .form__label {
|
|
font-size: 17px;
|
|
cursor: text;
|
|
top: 20px;
|
|
}
|
|
|
|
.form__label {
|
|
position: absolute;
|
|
top: 0;
|
|
display: block;
|
|
transition: 0.2s;
|
|
font-size: 17px;
|
|
color: var(--Quaternary);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.form__field:focus {
|
|
padding-bottom: 6px;
|
|
font-weight: 700;
|
|
border-width: 3px;
|
|
border-image: linear-gradient(to right, var(--Primary), var(--Secondary));
|
|
border-image-slice: 1;
|
|
}
|
|
|
|
.form__field:focus ~ .form__label {
|
|
position: absolute;
|
|
top: 0;
|
|
display: block;
|
|
transition: 0.2s;
|
|
font-size: 17px;
|
|
color: var(--Primary);
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* reset input */
|
|
.form__field:required, .form__field:invalid {
|
|
box-shadow: none;
|
|
}
|
|
|
|
|
|
/** Footer */
|
|
|
|
footer {
|
|
background-color: #333;
|
|
color: #fff;
|
|
text-align: center;
|
|
padding: 20px 0;
|
|
margin-top: 40px;
|
|
}
|
|
|
|
/* Loader**/
|
|
|
|
.loader {
|
|
--path: var(--Primary);
|
|
--dot: var(--Secondary);
|
|
--duration: 3s;
|
|
width: 44px;
|
|
height: 44px;
|
|
position: relative;
|
|
}
|
|
|
|
.loader:before {
|
|
content: '';
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
display: block;
|
|
background: var(--dot);
|
|
top: 37px;
|
|
left: 19px;
|
|
transform: translate(-18px, -18px);
|
|
animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
|
|
}
|
|
|
|
.loader svg {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.loader svg rect, .loader svg polygon, .loader svg circle {
|
|
fill: none;
|
|
stroke: var(--path);
|
|
stroke-width: 10px;
|
|
stroke-linejoin: round;
|
|
stroke-linecap: round;
|
|
}
|
|
|
|
.loader svg polygon {
|
|
stroke-dasharray: 145 76 145 76;
|
|
stroke-dashoffset: 0;
|
|
animation: pathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
|
|
}
|
|
|
|
.loader.triangle {
|
|
width: 48px;
|
|
}
|
|
|
|
.loader.triangle:before {
|
|
left: 21px;
|
|
transform: translate(-10px, -18px);
|
|
animation: dotTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
|
|
}
|
|
|
|
@keyframes pathTriangle {
|
|
33% {
|
|
stroke-dashoffset: 74;
|
|
}
|
|
|
|
66% {
|
|
stroke-dashoffset: 147;
|
|
}
|
|
|
|
100% {
|
|
stroke-dashoffset: 221;
|
|
}
|
|
}
|
|
|
|
@keyframes dotTriangle {
|
|
33% {
|
|
transform: translate(0, 0);
|
|
}
|
|
|
|
66% {
|
|
transform: translate(10px, -18px);
|
|
}
|
|
|
|
100% {
|
|
transform: translate(-10px, -18px);
|
|
}
|
|
}
|
|
.loader-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(255, 255, 255, 0.8);
|
|
z-index: 9999;
|
|
}
|
|
.loader {
|
|
display: inline-block;
|
|
margin: 0 16px;
|
|
}
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|