mrflos/memo
1
0
Fork 0
Code Issues 9 Pull requests Projects Releases Packages Wiki Activity Actions

feat: board opacity controller

Browse source
This commit is contained in:
leokontente 2025-06-04 10:43:37 +02:00
parent f52e91520b
commit acc04b29fb
2 changed files with 20 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

17
client/css/style.css
View file

@ -1,7 +1,6 @@
:root { :root {
--primary-color: #195962; --primary-color: #195962;
--secondary-color: #f56f6c; --secondary-color: #f56f6c;
--board-background-color: #eee8;
--dark-color: #252932; --dark-color: #252932;
--light-color: #ffffff; --light-color: #ffffff;
--post-it-pink: pink; --post-it-pink: pink;
@ -11,6 +10,10 @@
--post-it-white: #e7e8e9; --post-it-white: #e7e8e9;
--text-color: var(--dark-color); --text-color: var(--dark-color);
--background-color: var(--light-color); --background-color: var(--light-color);
--board-opacity: 0.8;
--board-background-color: rgba(238, 238, 238, var(--board-opacity));
--board-background-color-outline: rgba(221, 221, 221, var(--board-opacity));
--board-background-color-shadow: rgba(153, 153, 153, var(--board-opacity));
} }
body { body {
@ -156,14 +159,14 @@ a:active {
position: relative; position: relative;
background-color: var(--board-background-color); background-color: var(--board-background-color);
height: 100%; height: 100%;
box-shadow: inset 1px 1px 3px #999; box-shadow: inset 1px 1px 3px var(--board-background-color-shadow);
} }
.board-outline { .board-outline {
border: solid #ddda 6px; border: solid var(--board-background-color-outline) 6px;
display: block; display: block;
height: 466px; height: 466px;
box-shadow: 1px 1px 1px #aaa; box-shadow: 1px 1px 1px var(--board-background-color-shadow);
margin: 0 auto; margin: 0 auto;
} }
@ -270,11 +273,10 @@ h2 {
right: 3px; right: 3px;
top: 200px; top: 200px;
display: none; display: none;
opacity: 0.15;
} }
#add-col:hover { #add-col:hover {
opacity: 0.5; transform: scale(1.2);
} }
#delete-col { #delete-col {
@ -282,11 +284,10 @@ h2 {
right: 3px; right: 3px;
top: 224px; top: 224px;
display: none; display: none;
opacity: 0.15;
} }
#delete-col:hover { #delete-col:hover {
opacity: 0.5; transform: scale(1.2);
} }
#board-table:hover #add-col, #board-table:hover #add-col,

11
views/index.jade
View file

@ -48,6 +48,9 @@ block header
path(d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z") path(d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z")
block body block body
div(style="margin: 1em;")
label(for="opacity-range") Transparence du tableau :
input#opacity-range(type="range", min="0", max="1", step="0.01", value="1")
div.container div.container
div.board-container div.board-container
div.board-outline div.board-outline
@ -59,3 +62,11 @@ block body
span(style="font-weight:bold; font-size:16px;") + span(style="font-weight:bold; font-size:16px;") +
div#delete-col.col-icon(title="Supprimer une colonne", style="width:20px; height:20px; display:flex; justify-content:center; align-items:center; border:1px solid #000; cursor:pointer; margin-top:4px;") div#delete-col.col-icon(title="Supprimer une colonne", style="width:20px; height:20px; display:flex; justify-content:center; align-items:center; border:1px solid #000; cursor:pointer; margin-top:4px;")
span(style="font-weight:bold; font-size:16px;") − span(style="font-weight:bold; font-size:16px;") −
script.
document.addEventListener('DOMContentLoaded', function () {
const slider = document.getElementById('opacity-range');
slider.addEventListener('input', function () {
document.documentElement.style.setProperty('--board-opacity', slider.value);
});
});