3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-03 22:48:28 +02:00
Code Issues Projects Releases Packages Wiki Activity

💄 Change some styles in viewer mode

Browse source
This commit is contained in:
Eva 2022-07-28 09:30:17 +02:00
parent 8285cb8f62
commit 5b658c2f8a
7 changed files with 137 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

45
frontend/resources/styles/main/layouts/viewer.scss
View file

@ -1,4 +1,5 @@
.viewer-layout {
height: 100vh;
display: grid;
grid-template-rows: 48px auto;
grid-template-columns: 1fr;
@ -15,14 +16,34 @@
}
}
.fullscreen.viewer-layout.force-visible {
grid-template-rows: 1fr;
& .viewer-header {
position: fixed;
top: 0;
transition: top 400ms ease 300ms;
margin-bottom: 0;
z-index: 2;
}
& .viewer-bottom {
position: fixed;
bottom: 0;
transition: bottom 400ms ease 300ms;
z-index: 2;
}
}
.fullscreen.viewer-layout:not(.force-visible) {
grid-template-rows: 1fr;
& .viewer-header {
width: 100%;
position: fixed;
top: -48px;
left: 0;
transition: top 400ms ease 300ms;
z-index: 1;
z-index: 2;
margin-bottom: 48px;
&::after {
content: " ";
position: absolute;
@ -38,6 +59,28 @@
transition: top 200ms;
}
& .viewer-bottom {
width: 100%;
position: fixed;
bottom: -48px;
left: 0;
transition: bottom 400ms ease 300ms;
z-index: 2;
&::after {
content: " ";
position: absolute;
width: 100%;
height: 1rem;
left: 0;
bottom: 0px;
}
}
& .viewer-bottom:hover {
bottom: 0px;
transition: bottom 200ms;
}
& .viewer-content {
grid-row: 1 / span 2;
}