Linus-Enjoyer/Freedom-Loader
1
0
Fork 0
mirror of https://github.com/MasterAcnolo/Freedom-Loader.git synced 2026-07-29 18:25:47 +02:00
Code Issues Packages Projects Releases Wiki Activity

CSS Variable Begin

Browse Source
This commit is contained in:
MasterAcnolo
2025-07-01 13:51:42 +02:00
parent c888946588
commit 10cefdba19
3 changed files with 28 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
public/styles/button/checkbox.css → public/styles/components/checkbox.css
View File

@@ -1,5 +1,3 @@
/* From Uiverse.io by bociKond */
/* Hide the default checkbox */
.checkbox-mp3 input { .checkbox-mp3 input {
position: absolute; position: absolute;
opacity: 0; opacity: 0;
@@ -16,9 +14,8 @@
user-select: none; user-select: none;
} }
/* Create a custom checkbox */
.checkmark { .checkmark {
--clr: #0B6E4F; --clr: #3B82F6 ;
position: relative; position: relative;
top: 0; top: 0;
left: 0; left: 0;
@@ -29,26 +26,22 @@
transition: 300ms; transition: 300ms;
} }
/* When the checkbox is checked, add a blue background */
.checkbox-mp3 input:checked ~ .checkmark { .checkbox-mp3 input:checked ~ .checkmark {
background-color: var(--clr); background-color: var(--clr);
border-radius: .5rem; border-radius: .5rem;
animation: pulse 500ms ease-in-out; animation: pulse 500ms ease-in-out;
} }
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after { .checkmark:after {
content: ""; content: "";
position: absolute; position: absolute;
display: none; display: none;
} }
/* Show the checkmark when checked */
.checkbox-mp3 input:checked ~ .checkmark:after { .checkbox-mp3 input:checked ~ .checkmark:after {
display: block; display: block;
} }
/* Style the checkmark/indicator */
.container .checkmark:after { .container .checkmark:after {
left: 0.45em; left: 0.45em;
top: 0.25em; top: 0.25em;
@@ -61,7 +54,7 @@
@keyframes pulse { @keyframes pulse {
0% { 0% {
box-shadow: 0 0 0 #0B6E4F90; box-shadow: 0 0 0 var(--checkbox-pulse-color);
rotate: 20deg; rotate: 20deg;
} }
@@ -70,11 +63,11 @@
} }
75% { 75% {
box-shadow: 0 0 0 10px #0B6E4F60; box-shadow: 0 0 0 10px var(--checkbox-pulse-color);
} }
100% { 100% {
box-shadow: 0 0 0 13px #0B6E4F30; box-shadow: 0 0 0 13px var(--checkbox-pulse-color);
rotate: 0; rotate: 0;
} }
} }

23
public/styles/styles.css
View File

@@ -3,7 +3,8 @@
@import url("layout/ctr-infos.css"); @import url("layout/ctr-infos.css");
@import url("layout/header.css"); @import url("layout/header.css");
@import url("layout/videoinfo.css"); @import url("layout/videoinfo.css");
@import url("button/checkbox.css"); @import url("components/checkbox.css");
@import url("variables.css");
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@@ -11,22 +12,22 @@ html,body{
margin: 0; margin: 0;
padding: 0; padding: 0;
scroll-behavior: smooth; scroll-behavior: smooth;
/* outline: 2px solid red; */ /* outline: 2px solid red; */ /*<-- Utile pour le début ça */
font-family: "Poppins", sans-serif; font-family: "Poppins", sans-serif;
font-weight: 500; font-weight: 500;
font-style: normal; font-style: normal;
} }
body { body {
margin: 0; margin: 0;
/* background-color: #f5f5f5; */ background-color: var(--background-color);
background-image: linear-gradient(to left top, #838383, #a1a1a1, #bfbfbf, #dfdfdf, #ffffff); /* background-image: linear-gradient(to left top, #838383, #a1a1a1, #bfbfbf, #dfdfdf, #ffffff);
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-attachment: fixed; background-attachment: fixed; */
width: 100%; width: 100%;
height: 100%; height: 100%;
color: #333; color: #F8FAFC;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@@ -34,9 +35,15 @@ body {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
header p{
color: var(--subtitle-color);
}
.checkbox-inline{
color: var(--mp3-text-color);
}
/* #videoInfo { /* #videoInfo {
margin-top: 100px; margin-top: 100px;

9
public/styles/variables.css Normal file
View File

@@ -0,0 +1,9 @@
:root{
--background-color : #0F172A;
--title-color: ;
--subtitle-color : #a3aab4;
--mp3-text-color: #0F172A;
--default-text-color: #F8FAFC;
--checkbox-pulse-color:#9bbcf1;
}