Kraut.World/server
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Clicking on a video puts it in presentation mode

Browse source 
Adding the ability to put a video in presentation mode by clicking on it.
Also, adding small CSS animations on hover.
This commit is contained in:
David Négrier 2020-08-27 10:09:47 +02:00
parent 15e7b88e2b
commit 13272968cf
2 changed files with 77 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

28
front/dist/resources/style/style.css vendored
View file

@ -256,6 +256,10 @@ body {
.sidebar > div {
max-height: 21%;
}
.sidebar > div:hover {
max-height: 25%;
}
}
@media (max-aspect-ratio: 1/1) {
.main-container {
@ -274,6 +278,10 @@ body {
.sidebar > div {
max-width: 21%;
}
.sidebar > div:hover {
max-width: 25%;
}
}
.game {
@ -324,9 +332,16 @@ body {
.main-section > div {
margin: 2%;
flex-basis: 96%;
transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s, flex-basis 0.2s;
cursor: pointer;
/*flex-shrink: 2;*/
}
.main-section > div:hover {
margin: 0%;
flex-basis: 100%;
}
.sidebar {
flex: 0 0 25%;
display: flex;
@ -334,6 +349,12 @@ body {
.sidebar > div {
margin: 2%;
transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s, max-height 0.2s, max-width 0.2s;
cursor: pointer;
}
.sidebar > div:hover {
margin: 0%;
}
/* Let's make sure videos are vertically centered if they need to be cropped */
@ -354,11 +375,16 @@ body {
padding: 1%;
}
.chat-mode div {
.chat-mode > div {
margin: 1%;
max-height: 96%;
transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s;
cursor: pointer;
}
.chat-mode > div:hover {
margin: 0%;
}
.chat-mode.one-col > div {
flex-basis: 98%;
}