eric/pmomusic
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases 3 Wiki Activity

Ajout d'un padding à la liste des pistes

Browse Source 
Ajout d'un padding de 10px à gauche et à droite dans la liste des pistes pour améliorer l'espacement et l'alignement visuel.
This commit is contained in:
Eric Coissac
2026-01-10 16:39:29 +01:00
parent c745179200
commit c9f15289d0
2 changed files with 55 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
pmoapp/webapp/src/components/pmocontrol/CurrentTrack.vue
View File

@@ -356,6 +356,7 @@ async function handleProgressBarClick(event: MouseEvent) {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
padding: 0 10px;
}
.progress-bar {

106
pmoapp/webapp/src/style.css
View File

@@ -1,84 +1,86 @@
:root {
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
color: #535bf2;
}
body {
margin: 0;
display: flex;
flex-direction: column;
min-width: 320px;
min-height: 100vh;
width: 100%;
overflow-x: hidden;
margin: 0;
display: flex;
flex-direction: column;
min-width: 320px;
min-height: 100vh;
width: 100%;
overflow-x: hidden;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
outline: 4px auto -webkit-focus-ring-color;
}
.card {
padding: 2em;
padding: 2em;
}
#app {
width: 100%;
min-height: 100vh;
margin: 0;
padding: 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
width: 100%;
min-height: 100vh;
margin: 0;
padding: 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
zoom: 0.85;
transform-origin: top left;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}