raffi/List_ultimate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
Raffi
2026-02-26 21:29:34 +01:00
commit d9d84634e8
72 changed files with 18491 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/assets/css/base/_fonts.scss Normal file
View File

@@ -0,0 +1 @@
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Quicksand:wght@300;400;700&display=swap');

8
app/assets/css/base/_reset.scss Normal file
View File

@@ -0,0 +1,8 @@
*{
margin: 0;
}
html{
margin: 0;
padding: 0;
}

32
app/assets/css/base/_typography.scss Normal file
View File

@@ -0,0 +1,32 @@
h1, h2, h3, p, ul, li, label, button, input{
font-family: 'quicksand', Arial, Helvetica, sans-serif;
//color: blueviolet;
text-align: center;
}
h1{
color: blueviolet;
padding-top:1em;
font-weight: bold;
font-size: 2em;
}
h2{
color: blueviolet;
padding-block:1em;
font-size: 1.5em;
}
.base-input input {
border: 1px solid var(--input-border);
background: var(--input-bg);
color: var(--input-text);
}
label{
text-align: left;
}
input{
text-align:left;
}

90
app/assets/css/components/_modale.scss Normal file
View File

@@ -0,0 +1,90 @@
/*Modale annimation*/
.modal-animation-enter-from,
.modal-animation-leave-to{
opacity: 0;
}
.modal-animation-enter-active{
transition: opacity 0.3s ease;
}
.modal-animation-leave-active{
transition: opacity 0.3s ease 0.2s;
}
/*Modal inner animation*/
.modal-frame-animation-enter-from, .modal-frame-animation-leave-to{
opacity: 0;
transform: scale(0);
}
.modal-frame-animation-enter-active, .modal-frame-animation-leave-active{
transition: all 0.3s cubic-bezier(0.52, -0.02, 0.19, 1.02);
}
/*modal mise en forme*/
.modale{
position:fixed;
top:0;
left: 00;
background: rgba(140, 140, 140, 0.75);
width: 100vw;
height: 100vh;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
}
.modal-frame{
//border : dashed red 2px;
position: relative;
width: 80%;
min-width: 230px;
max-width: 350px;
max-height: 80vh;
overflow: visible;
background:#e5e5e5;
border-top-left-radius: 1em;
border-bottom-left-radius: 1em;
border-bottom-right-radius: 1em;
box-sizing:border-box;
padding: 2em;
margin:1em;
}
h1.modal-title{
padding: 0;
padding-bottom: 1em;
//border:dashed 2px red;
text-align:center;
}
.close-btn{
margin: auto;
position: absolute;
right: -17px;
top: -17px;
text-align: center;
border: none;
border-radius: 0.9em;
padding: 0.25em;
background-color: #e5e5e5;
color: blueviolet;
font-size: 1.7em;
transition: color 0.5s ease;
&:hover{
color: hsl(271, 76%, 68%);
cursor:pointer;
}
}
.modal-content{
//border: 2px dashed red;
max-height: calc(80vh - 7.5em);
overflow-y: auto;
//FireFox
scrollbar-width: none;
//Edge
-ms-overflow-style: none;
}

35
app/assets/css/layout/_app.scss Normal file
View File

@@ -0,0 +1,35 @@
.main-container{
display: flex;
justify-content: center;
background-color: rgb(218, 218, 218);
}
.app-container{
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: rgb(236, 236, 236);
box-shadow: 0px 0px 15px rgb(136, 136, 136) ;
min-height: 100dvh;
width:100%;
max-width: 450px;
overflow: hidden;
}
.up{
height: 100%;
position:relative;
border:#f0f 3px solid;
}
.app-scroll-view{
top: 0;
left: 0;
right: 0;
bottom: 0;
max-width: 450px;
overflow-y: auto;
-webkit-overflow-scrolling: touch; /* Fluidité pour iOS */
margin-inline:0.5em;
}

63
app/assets/css/layout/_navBar.scss Normal file
View File

@@ -0,0 +1,63 @@
button.panel-item{
border-radius: 0.35em;
padding:0.5em 0.5em;
border:none;
font-size:1em;
text-align: center;
margin-block:0.25em;
width:88%;
}
.panel-nav {
//display: none;
position: absolute;
top:0;
right:0;
background: #aaaaaa80;
backdrop-filter: blur(5px); /* flou du contenu derrière */
-webkit-backdrop-filter: blur(5px); /* Safari */
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-block: 2em;
gap: 0.75rem;
transform: translateX(100%);
opacity: 0;
transition: all 0.5s;
box-sizing: border-box;
z-index: 5;
&.open {
display: flex;
transform: translateX(1px);
opacity: 1;
}}
div.nav-bar-up{
display: flex;
flex-direction: column;
justify-content: end;
align-items: center;
}
div.nav-bar-down{
display: flex;
flex-direction: column;
justify-content: start;
text-align: right;
}
.panel-item {
text-decoration: none;
font-weight: 500;
color: blueviolet;
padding: 0.5rem;
padding-left: 3.2em;
padding-right: 0.8em;
transition: color 0.2s;
}
.panel-item:hover {
color: hsl(271, 76%, 35%);
background-color: #aaaaaa80;
}

7
app/assets/css/main.scss Normal file
View File

@@ -0,0 +1,7 @@
@use "./base/fonts";
@use "./base/reset";
@use "./base/typography";
@use "./components/modale";
@use "./layout/app";
@use "./layout/navBar";
@use "./pages/index";

38
app/assets/css/pages/_index.scss Normal file
View File

@@ -0,0 +1,38 @@
@use "sass:color";
.index-main-text > p,
.confirm-main-text{
text-align: left;
text-indent: 1em;
margin:0.5em;
color:rgb(0, 0, 0);
}
.index-main-text a,
.confirm-main-text a {
cursor: pointer;
text-decoration: none;
color: blueviolet;
transition: 0.3s;
&:hover{
color: color.adjust(blueviolet, $lightness: -25%);
//DEPRECATED
//color:darken($color: blueviolet, $amount: 50%)
}
}
.index-main-text-last {
color: blueviolet;
padding-block: 1.5em;
font-weight: bold;
& a {
cursor: pointer;
text-decoration: none;
color: blueviolet;
transition: 0.3s;
&:hover{
color: color.adjust(blueviolet, $lightness: -25%);
text-decoration: underline;
}
}
}

21
app/assets/css/settings/_colors.scss Executable file
View File

@@ -0,0 +1,21 @@
$body-bg:oklab(94.611% 0 -0.00011);
$page-bg:hsl(234, 20%, 30%);
//$page-bg1:hsl(0, 0%, 60%);
$renforced-light : hsl(13, 68%, 60%);
$renforced-normal: hsl(13, 68%, 40%);
$renforced-dark : hsl(13, 68%, 20%);
$hypertext-light : hsl(245, 100%, 87%);
$hypertext-normal : hsl(245, 100%, 82%);
$main-normal: hsl(52, 50%, 90%);
$main-dark : hsl(52, 50%, 70%);
$title-light : hsl(37, 79%, 90%);
$title-normal: hsl(37, 79%, 75%);
$title-dark : hsl(37, 79%, 60%);
$action-light : hsl(139, 57%, 85%);
$action-normal: hsl(139, 57%, 77%);
$action-dark : hsl(139, 57%, 67%);

2
app/assets/css/settings/_widths.scss Executable file
View File

@@ -0,0 +1,2 @@
$maxWidth: 1200px;
$imageWidth: 100%;