adminflsu/CommonHtml
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bester css and color

Browse Source
This commit is contained in:
florian 2025-09-04 13:01:10 +02:00
parent 64d7f835a8
commit bb93e3e47c
2 changed files with 16 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/header-snippet.html
View File

@ -4,10 +4,10 @@
<div class="back-button""> <div class="back-button"">
<svg width=" 24" height="8" viewBox="0 0 16 8" fill="none" class="arrow-icon"> <svg width=" 24" height="8" viewBox="0 0 16 8" fill="none" class="arrow-icon">
<path d="M15 4H4V1" stroke="#C99CCF" /> <path d="M15 4H4V1" stroke="#CDF5FF" />
<path d="M14.5 4H3.5H0" stroke="#C99CCF" /> <path d="M14.5 4H3.5H0" stroke="#CDF5FF" />
<path <path
d="M15.8536 4.35355C16.0488 4.15829 16.0488 3.84171 15.8536 3.64645L12.6716 0.464466C12.4763 0.269204 12.1597 0.269204 11.9645 0.464466C11.7692 0.659728 11.7692 0.976311 11.9645 1.17157L14.7929 4L11.9645 6.82843C11.7692 7.02369 11.7692 7.34027 11.9645 7.53553C12.1597 7.7308 12.4763 7.7308 12.6716 7.53553L15.8536 4.35355ZM15 4.5L15.5 4.5L15.5 3.5L15 3.5L15 4.5Z" d="M15.8536 4.35355C16.0488 4.15829 16.0488 3.84171 15.8536 3.64645L12.6716 0.464466C12.4763 0.269204 12.1597 0.269204 11.9645 0.464466C11.7692 0.659728 11.7692 0.976311 11.9645 1.17157L14.7929 4L11.9645 6.82843C11.7692 7.02369 11.7692 7.34027 11.9645 7.53553C12.1597 7.7308 12.4763 7.7308 12.6716 7.53553L15.8536 4.35355ZM15 4.5L15.5 4.5L15.5 3.5L15 3.5L15 4.5Z"
fill="#C99CCF" /> fill="#CDF5FF" />
</svg> </svg>
</div> </div>

23
public/styles/common.css
View File

@ -25,8 +25,8 @@ body {
.body { .body {
background: repeating-conic-gradient(from 45deg, background: repeating-conic-gradient(from 45deg,
#a37fb1 0% 25%, #c2d1cf 0% 25%,
#604566 0% 50%); #a0a9b6 0% 50%);
background-size: max(10vw, 10svh) max(10vw, 10svh); background-size: max(10vw, 10svh) max(10vw, 10svh);
display: flex; display: flex;
@ -46,13 +46,13 @@ header {
height: 90px; height: 90px;
min-height: 90px; min-height: 90px;
width: calc(100% - 80px); width: calc(100% - 80px);
color: #C99CCF; color: rgb(205, 245, 255);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0 20px; padding: 0 20px;
flex-direction: row; flex-direction: row;
background: #433147d8; background: #78888f85;
margin: 20px; margin: 20px;
border-radius: 10px; border-radius: 10px;
-webkit-border-radius: 10px; -webkit-border-radius: 10px;
@ -87,7 +87,7 @@ footer {
width: calc(100% - 80px); width: calc(100% - 80px);
color: rgb(201, 156, 207); color: rgb(205, 245, 255);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -95,7 +95,7 @@ footer {
padding: 0 20px; padding: 0 20px;
flex-direction: row; flex-direction: row;
background: #433147d8; background: #78888f85;
margin: 20px; margin: 20px;
border-radius: 10px; border-radius: 10px;
@ -154,9 +154,9 @@ main {
border-radius: 10px; border-radius: 10px;
text-decoration: none; text-decoration: none;
color: rgb(201, 156, 207); color: rgb(205, 245, 255);
background: #433147d8; background: #78888f85;
transition: background 0.3s ease-in-out, transform 0.3s ease-in-out, margin 0.3s ease-in-out; transition: background 0.3s ease-in-out, transform 0.3s ease-in-out, margin 0.3s ease-in-out;
@ -168,8 +168,11 @@ main {
.card:hover { .card:hover {
transform: scale(1.05); transform: scale(1.05);
transition: background 0.3s ease-in-out, transform 0.3s ease-in-out, margin 0.3s ease-in-out; transition: background 0.3s ease-in-out, transform 0.3s ease-in-out, margin 0.3s ease-in-out;
margin: 7px; margin: 7px;
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-ms-transform: scale(1.05);
-o-transform: scale(1.05);
} }
.card::before { .card::before {
@ -223,7 +226,7 @@ main {
.card-container { .card-container {
display: grid; display: grid;
grid-template-columns: repeat(5, 1fr); grid-template-columns: repeat(3, 1fr);
/* 2 colonnes de largeur égale */ /* 2 colonnes de largeur égale */
gap: 20px; gap: 20px;
width: 1400px; width: 1400px;