src/pages/paint/PaintMenu.css
.PaintMenu {
background-color: #0001;
height: 100%;
left: 0;
opacity: 0;
pointer-events: none;
position: fixed;
top: 0;
transition: opacity 300ms;
width: 100%;
}
.PaintMenu.-visible {
opacity: 1;
pointer-events: auto;
}
.PaintMenu-close {
position: absolute;
right: var(--app-space);
top: calc(var(--app-header-height) + var(--app-space));
}
/*
.PaintMenu-content
+ PaintMenu-body
+ PaintMenu-footer
+ PaintMenu-footerButton (*)
*/
.PaintMenu-content {
display: flex;
flex-direction: row;
}
.PaintMenu-body {
flex-grow: 1;
}
.PaintMenu-footer {
bottom: 0;
display: flex;
align-items: stretch;
height: 100px;
left: 0;
opacity: 0.8;
position: absolute;
transform: translateY(10vh);
transition: transform 300ms;
width: 100%;
}
.PaintMenu.-visible .PaintMenu-footer {
transform: translateY(0);
}
.PaintMenu-footerButton {
flex-grow: 1;
}
.PaintMenu-penMenu {
bottom: calc(100px + var(--app-space));
box-sizing: border-box;
left: 0;
opacity: 0;
padding: 0 var(--app-space);
position: absolute;
transform: translateY(30vh);
transition: all 300ms;
width: 100%;
}
.PaintMenu.-visible .PaintMenu-penMenu {
opacity: 1;
transform: translateY(0);
}
.PaintMenu-colors {
display: flex;
justify-content: space-evenly;
margin-bottom: var(--app-space);
}
.StrokeWidths {
display: flex;
justify-content: space-evenly;
margin-bottom: var(--app-space);
}
.StrokeWidth {
border-radius: 3px;
border: 1px solid transparent;
}
.StrokeWidth.-selected {
border-color: var(--color-highlight-t);
box-shadow:
1px 1px 0 #fff9 inset,
1px 1px 0 #fff9;
}
.StrokeWidth-button {
background-color: transparent;
border: none;
}
.ColorButton {
border-radius: 3px;
border: 1px solid transparent;
}
.ColorButton.-selected {
border-color: var(--color-highlight-t);
box-shadow:
1px 1px 0 #fff9 inset,
1px 1px 0 #fff9;
}
.ColorButton-button {
border-radius: 50%;
border: none;
box-shadow: 0 0 5px #0003;
height: 50px;
width: 50px;
font-size: 0;
}