3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-03 22:58:29 +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 • committed by Alejandro Alonso
parent 8d8e4c5e22
commit 8dfd74547a
7 changed files with 135 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

50
frontend/resources/styles/main/layouts/handoff.scss
View file

@ -19,14 +19,35 @@ $width-settings-bar: 256px;
}
}
.fullscreen.handoff-layout.force-visible {
display: grid;
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.handoff-layout:not(.force-visible) {
.viewer-header {
& .viewer-header {
width: 100%;
position: fixed;
top: -48px;
left: 0;
transition: top 400ms ease 300ms;
z-index: 25;
z-index: 2;
margin-bottom: 48px;
&::after {
content: " ";
@ -43,7 +64,29 @@ $width-settings-bar: 256px;
transition: top 200ms;
}
.viewer-content {
& .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;
}
}
@ -51,6 +94,7 @@ $width-settings-bar: 256px;
.handoff-layout {
.viewer-section {
flex-wrap: nowrap;
margin-top: 0;
&.fullscreen {
.settings-bar,
.settings-bar {

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;
}

3
frontend/resources/styles/main/partials/viewer-header.scss
View file

@ -6,7 +6,8 @@
grid-template-columns: 45% 10% 45%;
height: 48px;
padding: 0 $size-4 0 55px;
position: relative;
top: 0;
position: absolute;
justify-content: space-between;
width: 100vw;

14
frontend/resources/styles/main/partials/viewer.scss
View file

@ -1,6 +1,5 @@
.viewer-content {
background-color: black;
display: grid;
grid-template-rows: 232px auto;
grid-template-columns: 1fr;
@ -8,19 +7,19 @@
.viewer-section {
height: calc(100vh - 48px);
&.fullscreen {
height: 100vh;
}
grid-row: 1 / span 2;
grid-column: 1 / span 1;
display: flex;
justify-content: center;
align-items: center;
flex-flow: wrap;
overflow: auto;
&.fullscreen {
height: 100vh;
margin-top: 0px;
}
& .viewer-go-prev,
& .viewer-go-next {
position: absolute;
@ -28,7 +27,7 @@
display: flex;
align-items: center;
width: 53px;
z-index: 2;
.arrow {
display: none;
align-items: center;
@ -87,6 +86,7 @@
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
&.left-bar {
width: calc(100% - 512px);