Paolo Possanzini
122 lines
2.4 KiB
Plaintext
122 lines
2.4 KiB
Plaintext
// out: false, sourceMap: false, main: ../style.less
|
|
@import "colors.less";
|
|
@import "modals.less";
|
|
@import "grid-system.less";
|
|
@import "input.less";
|
|
@import "buttons.less";
|
|
@import "fonts.less";
|
|
@import "header.less";
|
|
@import "ribbons.less";
|
|
@import "footer.less";
|
|
@import "process-info.less";
|
|
@background-color: rgb(216, 216, 216);
|
|
@handle-width: 48px;
|
|
@handle-height: 32px;
|
|
@persona-size: 88px;
|
|
.persona {
|
|
height: @persona-size;
|
|
width: @persona-size;
|
|
border-radius: @persona-size /2;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Work Sans', sans-serif;
|
|
background-color: @color-body-background;
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#app {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
position: relative;
|
|
}
|
|
|
|
#app.blur {
|
|
filter: blur(10px);
|
|
}
|
|
|
|
#main-view {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 80px;
|
|
height: calc(~'100vh - 80px');
|
|
background-color: @background-color;
|
|
z-index: 100;
|
|
transition: 0.5s ease-out;
|
|
.handle {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
#main-view.turn-up {
|
|
transform: translateY(-100vh);
|
|
}
|
|
|
|
#main-view-handler {
|
|
position: absolute;
|
|
top: -100px;
|
|
left: 0;
|
|
width: 100vw;
|
|
box-shadow: 2px 3px 5px 0 rgba(0, 0, 0, 0.4);
|
|
z-index: 300;
|
|
transition: 0.5s 0.5s ease-out;
|
|
.handle {
|
|
background-color: @background-color;
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: calc(~'50vw - 24px');
|
|
text-align: center;
|
|
width: @handle-width;
|
|
height: @handle-height;
|
|
border-bottom-left-radius: @handle-height /2;
|
|
border-bottom-right-radius: @handle-height /2;
|
|
box-shadow: 2px 3px 5px 0 rgba(0, 0, 0, 0.4);
|
|
font-size: 26px;
|
|
color: @color-darkish-blue;
|
|
line-height: @handle-height;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
#main-view-handler.turn-up {
|
|
transform: translateY(100px);
|
|
|
|
}
|
|
|
|
#back-view {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 80px;
|
|
height: calc(~'100vh - 80px'); // background-color: rgb(145, 55, 55);
|
|
z-index: 1;
|
|
}
|
|
|
|
.tester {
|
|
margin: auto;
|
|
width: 60vw;
|
|
height: 60vh;
|
|
top: calc(50% - 30vh);
|
|
position: absolute;
|
|
left: calc(50% - 30vw);
|
|
background-color: white;
|
|
padding: 10px;
|
|
.row {
|
|
display: flex;
|
|
}
|
|
button {
|
|
height: 50px;
|
|
margin: 0 10px;
|
|
}
|
|
}
|