mirror of
https://github.com/MasterAcnolo/Freedom-Loader.git
synced 2026-07-29 18:25:47 +02:00
Refactor: Restructure HTML layout and enhance CSS styles for improved UI
This commit is contained in:
@@ -24,31 +24,6 @@
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
html,body{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
scroll-behavior: smooth;
|
||||
/*outline: 2px solid red; /*<-- Utile pour le debug ça */
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background-color: var(--background-color);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: var(--default-text-color);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
/* Because why not */
|
||||
#reference{
|
||||
position: fixed;
|
||||
@@ -59,18 +34,67 @@ body {
|
||||
color: #b0b0b02f;
|
||||
}
|
||||
|
||||
/* Scrollbar globale pour Chromium/Electron */
|
||||
body::-webkit-scrollbar {
|
||||
|
||||
html,body{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
scroll-behavior: smooth;
|
||||
/*outline: 2px solid red; /*<-- Utile pour le debug ça */
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: var(--background-color);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: var(--default-text-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 1100;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
main {
|
||||
width: 100%;
|
||||
height: calc(100vh - 48px);
|
||||
margin-top: 48px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Scrollbar pour main */
|
||||
main::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar-track {
|
||||
main::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar-thumb {
|
||||
main::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 5px;
|
||||
border: 2px solid transparent;
|
||||
@@ -78,29 +102,29 @@ body::-webkit-scrollbar-thumb {
|
||||
transition: background-color 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar-thumb:hover {
|
||||
main::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(255, 255, 255, 0.35);
|
||||
transform: scaleX(1.05);
|
||||
}
|
||||
|
||||
/* Thème clair */
|
||||
body.light::-webkit-scrollbar-track {
|
||||
body.light main::-webkit-scrollbar-track {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
body.light::-webkit-scrollbar-thumb {
|
||||
body.light main::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
body.light::-webkit-scrollbar-thumb:hover {
|
||||
body.light main::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
.container{
|
||||
margin-top: 50px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
header p{
|
||||
#subtitle{
|
||||
color: var(--subtitle-color);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user